[NEXT-1220] layout.js rendering twice in production #49115

joshwcomeau · 2023-05-02T22:19:04Z

Verify canary release

I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System:
      Platform: darwin
      Arch: arm64
      Version: Darwin Kernel Version 22.4.0: Mon Mar  6 20:59:28 PST 2023; root:xnu-8796.101.5~3/RELEASE_ARM64_T6000
    Binaries:
      Node: 16.17.0
      npm: 8.15.0
      Yarn: 1.22.19
      pnpm: N/A
    Relevant packages:
      next: 13.3.5-canary.3
      eslint-config-next: 13.3.4
      react: 18.2.0
      react-dom: 18.2.0

Which area(s) of Next.js are affected? (leave empty if unsure)

App directory (appDir: true)

Link to the code that reproduces this issue

https://codesandbox.io/p/sandbox/layout-render-twice-u24kxo

To Reproduce

Visit the CodeSandbox link
Open the "dev:logs" pane
Notice that duplicate logs occur:

Describe the Bug

The root layout.js will render twice on the server for every request, when using dynamic routing (const dynamic = 'force-dynamic';). This happens even though it's a Server Component (no "use client" directive).

My first thought was that this was Strict Mode related, but the double-render occurs even when disabling Strict Mode in next.config.js, as well as when serving a production build.

This is happening in the root layout.js, as well as any components rendered within layout.js. It does not seem to be happening in page.js.

Expected Behavior

Each request should generate a single render, so that any expensive operations (eg. database calls) only fire once.

EDIT: with further testing, I notice that these two renders are done in parallel, so it wouldn't actually slow the response, but it does cause problems if there are side effects (eg. a hit counter that registers every render).

Which browser are you using? (if relevant)

No response

How are you deploying your application? (if relevant)

No response

_NEXT-1220

The text was updated successfully, but these errors were encountered:

timneutkens · 2023-05-03T13:12:05Z

Hey Josh, I can't open the sandbox, happy to take a look. Without looking at the code I'm assuming what you're seeing is the preloading behavior, which will only end up with a single render but it's not guaranteed that React only ever renders once anyway because of Suspense boundaries.

Each request should generate a single render, so that any expensive operations (eg. database calls) only fire once.

All expensive operations should leverage import { cache } from 'react' so that they only ever happen once per request instead of once per call, that way rerendering because of e.g. a Suspense boundary resolving would cause a similar second render.

joshwcomeau · 2023-05-03T15:34:16Z

Hi @timneutkens! Ahh that's super helpful, thanks for the context!

In case it's useful, here's the code from that codesandbox, in the root layout.js:

export default function RootLayout({ children }) {
  console.log("Render", Date.now());
  
  return (
    <html lang="en">
      <body>{children}</body>
    </html>
  );
}

I see two logs firing 1-2 milliseconds apart when refreshing the page.

RE: preloading behavior, do you happen to know where I can learn more about it? Tried googling but I couldn't find anything. Although I realize all this stuff is in beta / docs might not exist yet.

choisuill · 2023-05-16T02:27:47Z

I have same issue
Why is it rendered twice?

// app / layout.tsx
export default async function RootLayout({ children }: IProps) {
  console.log('RootLayout Render');
  return (
    <html lang="en">
      <body>
         <main>{children}</main>
      </body>
    </html>
  );
}`

// app / page.tsx
export default async function Home() {
  console.log('Home Render');
  return <div>Home</div>
}

result
Home Render
RootLayout Render
RootLayout Render

mohamadfala · 2023-05-20T22:53:44Z

I have same issue Why is it rendered twice?

// app / layout.tsx
export default async function RootLayout({ children }: IProps) {
  console.log('RootLayout Render');
  return (
    <html lang="en">
      <body>
         <main>{children}</main>
      </body>
    </html>
  );
}`

// app / page.tsx
export default async function Home() {
  console.log('Home Render');
  return <div>Home</div>
}

result
Home Render
RootLayout Render
RootLayout Render

I'm facing the exact same issue! i tried removing everything and kept it as basic code exactly as you provided, but it keeps rendering twice (not because of strict mode, i have turned this off already).

I'm using next-auth, but i did remove the session provider and everything else that could affect this behavior.

any luck finding a resolution to your issue?

mohamadfala · 2023-05-20T22:55:17Z

@joshwcomeau I was wondering if you did find your issue.. 👀

timneutkens · 2023-05-22T19:32:20Z

This is caused by the root not-found boundary being applied by default, so it renders the layout around the not-found boundary in order for it to render correctly when notFound() is called in the root layout under certain conditions. This can be improved in the future so I've synced it into our issue tracker.

0xAnakin · 2023-06-07T00:44:40Z

Any updates on this?

Introduce a new way to search for `not-found` component that based on the request pathname and current loader tree of that route. And we search the proper not-found in the finall catch closure of app rendering, so that we don't have to pass down the root layout to app-router to create the extra error boundary. This ensures the root layout doesn't have duplicated rendering for normal requests Fixes NEXT-1220 Fixes #49115

karlhorky · 2023-07-14T11:10:35Z

I think the PR that fixed this (#52589) may have removed the layout in our not-found.tsx page:

Copying my comment over here if it's helpful for anyone:

Hmm... wonder if this is causing the layout to be missing on the not-found.tsx page:

Before (next@13.4.9, left navigation from layout):

After (next@13.4.10, no left navigation from layout):

karlhorky · 2023-07-15T14:31:42Z

Opened an issue to report the problem of not-found losing the layout here:

not-found loses layout #52718

github-actions · 2023-08-15T00:03:30Z

This closed issue has been automatically locked because it had no new activity for a month. If you are running into a similar issue, please create a new issue with the steps to reproduce. Thank you.

joshwcomeau added the bug Issue was opened via the bug report template. label May 2, 2023

github-actions bot added the area: app label May 2, 2023

timneutkens added the linear: next Confirmed issue that is tracked by the Next.js team. label May 22, 2023

timneutkens changed the title ~~layout.js rendering twice in production~~ [NEXT-1220] layout.js rendering twice in production May 22, 2023

IHIutch mentioned this issue Jun 1, 2023

Nextjs 13 App Dir example triggers twice on initial site load derrickreimer/fathom-client#45

Closed

balazsorban44 mentioned this issue Jul 6, 2023

Top-level root layout is computed twice #52093

Closed

1 task

This comment was marked as spam.

Sign in to view

huozhi mentioned this issue Jul 13, 2023

Ensure root layout only render once per request #52589

Merged

shuding closed this as completed in #52589 Jul 13, 2023

karlhorky mentioned this issue Jul 15, 2023

not-found loses layout #52718

Closed

1 task

github-actions bot added the locked label Aug 15, 2023

github-actions bot locked as resolved and limited conversation to collaborators Aug 15, 2023

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

[NEXT-1220] layout.js rendering twice in production #49115

[NEXT-1220] layout.js rendering twice in production #49115

joshwcomeau commented May 2, 2023 •

edited by timneutkens

Loading

timneutkens commented May 3, 2023

joshwcomeau commented May 3, 2023 •

edited

Loading

choisuill commented May 16, 2023 •

edited

Loading

mohamadfala commented May 20, 2023

mohamadfala commented May 20, 2023

timneutkens commented May 22, 2023

0xAnakin commented Jun 7, 2023

This comment was marked as spam.

karlhorky commented Jul 14, 2023

karlhorky commented Jul 15, 2023

github-actions bot commented Aug 15, 2023

[NEXT-1220] layout.js rendering twice in production #49115

[NEXT-1220] layout.js rendering twice in production #49115

Comments

joshwcomeau commented May 2, 2023 • edited by timneutkens Loading

Verify canary release

Provide environment information

Which area(s) of Next.js are affected? (leave empty if unsure)

Link to the code that reproduces this issue

To Reproduce

Describe the Bug

Expected Behavior

Which browser are you using? (if relevant)

How are you deploying your application? (if relevant)

timneutkens commented May 3, 2023

joshwcomeau commented May 3, 2023 • edited Loading

choisuill commented May 16, 2023 • edited Loading

mohamadfala commented May 20, 2023

mohamadfala commented May 20, 2023

timneutkens commented May 22, 2023

0xAnakin commented Jun 7, 2023

This comment was marked as spam.

karlhorky commented Jul 14, 2023

karlhorky commented Jul 15, 2023

github-actions bot commented Aug 15, 2023

joshwcomeau commented May 2, 2023 •

edited by timneutkens

Loading

joshwcomeau commented May 3, 2023 •

edited

Loading

choisuill commented May 16, 2023 •

edited

Loading