Next.js Discord

Discord Forum

Root layout getting rendered multiple times

Unanswered
Cornish Rex posted this in #help-forum
Open in Discord
Avatar
Cornish RexOP
I am fetching some content in every page in app router directory structure. My rootlayout also consists of same fetch method but for different data. I have console logged inside my fetcher function. The content I am fetching in rootlayout triggers the fetch content multiple times, causing the page to go unresponsive or crashed. what could be the reason? This is also causing vercel to render image multiple times somehow.. how to tackle this?

8 Replies

Avatar
joulev
Show code
Give me a reproduction repository
Avatar
Cornish RexOP
export default async function RootLayout({
  children,
}: {
  children: React.ReactNode;
}) {
  const headerConfig = await getConfig("Header");
  const footerConfig = await getConfig("Footer");

  console.log("Rendering root layout client");

  return (
    <html lang="en" className={`${inter.variable} ${open_sans.variable}`}>
      <Script src="" />
      <GoogleAnalytics GA_MEASUREMENT_ID="" />
      <body>
        <Header config={headerConfig} />
        {children}
        <ToastContainer
          position="bottom-right"
          autoClose={5000}
          hideProgressBar={false}
          newestOnTop={false}
          closeOnClick
          pauseOnHover
        />
        <CookieBanner />
        <Footer config={footerConfig} />
      </body>
    </html>
  );
}
Avatar
joulev
As in, a minimal repository containing a nextjs app - because from your description, it seems the interaction between the root layout and pages is not working well and I need an app to see why
Avatar
Cornish RexOP
actually, I am also not able to reproduce it... sometimes out of nowhere it just starts logging infinitely
can you provide me with correct ways to fetch data in server side components and passing them to client side components without rendering root layout multiple times
Avatar
joulev
Your code already looks good to me though, aside from the empty <Script /> and the <GoogleAnalytics /> which probably should be inside <body>
Avatar
Cornish RexOP
okayy... I have removed secrets from them that's why they are empty