Next.js Discord

Discord Forum

Can someone explain `dyanmicIO` and Suspense?

Unanswered
Bohemian Shepherd posted this in #help-forum
Open in Discord
Avatar
Bohemian ShepherdOP
Hello,

I'm trying out dyanmicIO for a saas site I'm building (mostly dynamic). However, I am getting the following error: https://nextjs.org/docs/messages/next-prerender-missing-suspense

I don't understand why we need Suspense. It seems like it's asking me to wrap Suspense around my server components which doesn't make sense to me. Previously I've been required to wrap components that use useSearchParams in Suspense but this is different. Is the best move to just wrap the whole layout in a Suspense? What if my root layout does some awaiting?

3 Replies

Avatar
Bohemian ShepherdOP
I have a feeling that it has to do with: You are on a page, and you click to go to another page that is purely server rendered. Next needs a suspense boundary while those react components load. However I'm not sure why it wasn't needed at all in Next 14
Avatar
Bohemian ShepherdOP
Creating a root loading.tsx file doesn't seem to fix the issue
Avatar
Bohemian ShepherdOP
Wrapping the whole RootLayout in a suspense does fix this, however I do with there was a root-loading.tsx file option to avoid all of this:

async function RootLayout({ children }: PropsWithChildren) {
  const user = await getSession();
  return (
    <html
      lang="en"
      className={twMerge(inter.variable, interTight.variable, "h-full")}
    >
      <body className="flex min-h-screen flex-col">
        <Navbar user={user?.user ?? null} />
        <main className="flex-grow">{children}</main>
        <Footer />
      </body>
    </html>
  );
}

export default function RootLayoutWrapper(props: PropsWithChildren) {
  const { children } = props;
  return (
    <Suspense>
      <RootLayout>{children}</RootLayout>
    </Suspense>
  );
}