Next.js Discord

Discord Forum

dynamicIO in dynamic routes (app router, nextjs15)

Answered
Northeast Congo Lion posted this in #help-forum
Open in Discord
Avatar
Northeast Congo LionOP
Basically stuckt (can't build) now.
Dynamic routes require cache/suspense, but if you cache the dynamic route, they timeout.
What's the workaround?
Thanks to @Plague for letting me know I'm not alone and sharing what he found.
You can see the post in the gpt-help here: https://discord.com/channels/752553802359505017/1312542179004125214
Answered by Northeast Congo Lion
Hey dude! Apologies for the late answer, but that's exactly what I did.
I have a folder that catches the parameters [product_id].
This is how my layout.tsx looks like:

export default function ProductLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      {children}
    </Suspense>
  );
}


Then, my page is a server page that gets the product_id from the parameters and I pass that to another component, my view component.
Hope it's clear! Ask any questions if you want to (use this chat so everyone benefits from it, no DMs).
View full answer

9 Replies

Avatar
Northeast Congo LionOP
For now I'll simply wrap the entire page in a suspense from the layout but not sure if this is how it's supposed to look.
Avatar
wouter
@Northeast Congo Lion could you elaborate on how you wrapped the entire page in a suspense? I'm running into the same issue of not being able to build with any param in the route.
I've tried a suspense around the children in the layout, even making the page function not async at all and ignoring the route param but it still does not build. My conclusion is that it just doesn't work at the moment, but if you have gotten it to work that'd be awesome.
Avatar
@wouter <@212425356777357314> could you elaborate on how you wrapped the entire page in a suspense? I'm running into the same issue of not being able to build with any param in the route.
Avatar
Northeast Congo LionOP
Hey dude! Apologies for the late answer, but that's exactly what I did.
I have a folder that catches the parameters [product_id].
This is how my layout.tsx looks like:

export default function ProductLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  return (
    <Suspense fallback={<LoadingSkeleton />}>
      {children}
    </Suspense>
  );
}


Then, my page is a server page that gets the product_id from the parameters and I pass that to another component, my view component.
Hope it's clear! Ask any questions if you want to (use this chat so everyone benefits from it, no DMs).
Answer
Avatar
European pilchard
Great heavens! This fixes my build issue! Looks kinda "hacky" but I'm glad that it works for now, THX!
Avatar
wouter
On the latest next canary now and this still doesn't work for me, what do your guys' page.tsx look like?
Avatar
European pilchard
I just have my root layout wrapped in suspense. I think the problem is, that the build is trying to pregenerate dynamic pages, but with dynamicIO you can't exactly put force-dynamic in there, so to mark pages as dynamic you have to put them in suspense. When you put suspense in root layout, you mark all pages as dynamic for the build. Better way is probably making layouts for all dynamic pages and putting suspense in there.
Avatar
wouter
Hope I'm not bothering anyone sending messages here again, but I tracked down why it wasn't working for me and it had to do with my root layout including a client component that accesses usePathname. Most definitely a bug I believe.
Avatar
Hudsonian Godwit
this just drove me crazy for 3 hours straight 😭
Thanks for the workaround