Why does the root layout.tsx server render on every request? #81337

maral · 2025-07-05T11:39:11Z

maral
Jul 5, 2025

Hi, I am trying to learn as much as possible on how Next.js app router works (ISR, SSR, SSG, PPR etc.) and I stumbled upon an unintuitive behavior - the root layout.tsx (only the root one) renders on the server with every request, even when everything else (and the layout's contents) are static (SSG).

I tested it out with the create-next-app (with Next.js 15.3.4) and even stripped down the layout.tsx to be as barebones as possible:

export default function RootLayout({
  children,
}: Readonly<{
  children: React.ReactNode;
}>) {
  console.log("RootLayout");
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

Now when I run npm run build and npm run start, with every reload, RootLayout is printed out into the console, meaning the root layout is server rendered with every request. This is not the case with nested layouts, which run only during the build phase and do not server render.

Why is that? And shouldn't this fact be explained a bit more in the docs? Putting heavier computation into the layout.tsx, expecting to happen only once during build, would lead to degraded performance, since it would be re-computed with every request.

Thanks a lot for the clarification! 🙏

Shineii86 · 2025-07-05T13:14:24Z

Shineii86
Jul 5, 2025

Great question! This behavior is expected and relates to how the Next.js App Router works under the hood.

In the App Router architecture, the RootLayout is responsible for generating the outer HTML document shell — specifically the <html> and <body> tags. Because this shell must be re-generated for every incoming request (especially to support React Server Components, streaming, and per-request metadata), the RootLayout is rendered on the server every time.

Even if your page is static (SSG), Next.js still needs to wrap that static content in a dynamically rendered document structure. This ensures proper support for per-request features, like internationalization, headers, middleware rewrites, and more.

In contrast, nested layouts that don’t participate in the full document structure can often be cached or pre-rendered and reused without server-rendering every time.

Key points:

RootLayout is rendered per request because it defines the document shell.
It enables streaming, dynamic HTML wrappers, and per-request context.
Avoid putting heavy computation or non-cacheable logic in the RootLayout.

📚 Next.js Layouts Docs

Hope this helps clarify the behavior! 😊

1 reply

maral Jul 7, 2025
Author

Great explanation, thanks! It might be useful to add a mention of this behavior to the linked docs, e.g. here?

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Uh oh!

Why does the root layout.tsx server render on every request? #81337

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{editor}}'s edit

{{editor}}'s edit

Uh oh!

Replies: 1 comment 1 reply

Uh oh!

{{title}}

Uh oh!

Uh oh!

{{title}}

Uh oh!

Select a reply

Uh oh!

Why does the root layout.tsx server render on every request? #81337

Uh oh!

Uh oh!

maral Jul 5, 2025

Replies: 1 comment · 1 reply

Uh oh!

Shineii86 Jul 5, 2025

Uh oh!

maral Jul 7, 2025 Author

maral
Jul 5, 2025

Replies: 1 comment 1 reply

Shineii86
Jul 5, 2025

maral Jul 7, 2025
Author