Whole page component re-renders (unmounts) when route changes

[opr-inzn]

Link to the code that reproduces this issue or a replay of the bug

https://codesandbox.io/p/sandbox/optimistic-panna-dgh66c

To Reproduce

–

Current vs. Expected behavior

Locally, this runs as expected and does not re-render the layout. When deployed to Vercel however, it re-renders the layout for whatever reason. Local version on Codesandbox: https://codesandbox.io/p/sandbox/optimistic-panna-dgh66c, deployed version on Vercel: https://clock-nextjs13.vercel.app/. This is not expected behaviour – I do not want to show my preloader again just because some of the dynamic metadata changed.

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.6.0: Wed Jul  5 22:22:05 PDT 2023; root:xnu-8796.141.3~6/RELEASE_ARM64_T6000
    Binaries:
      Node: 20.1.0
      npm: 9.8.0
      Yarn: N/A
      pnpm: N/A
    Relevant Packages:
      next: 13.4.20-canary.15
      eslint-config-next: 13.4.19
      react: 18.2.0
      react-dom: 18.2.0
      typescript: 5.2.2
    Next.js Config:
      output: N/A

Which area(s) are affected? (Select all that apply)

App Router

Additional context

No response

_NEXT-1609

[balazsorban44]

The deployment you linked to does not show the behavior you are describing, can you explain your expectation more precisely?

I can only see preloaded once, not when navigating between pages.

[opr-inzn]

@balazsorban44 Yes indeed, you're right. Odd! Haven’t really been able to reproduce this.

Here's a live example – though probably not very useful for debugging: https://diegoschwertberger.com/work. When you navigate to any of the first two projects the preloader always gets displayed again. In a previous production build (also deployed on Vercel) it was working. I've already checked for the usual re-render suspects, but it pretty much happens even if I remove all code of the [slug] which is very strange.

[mwildehahn]

@balazsorban44 I think this is a reproduction of the issue (or this is a separate issue): https://github.com/mwildehahn/reproduce-layout-rerender deployed here: https://reproduce-layout-rerender.vercel.app.

When running locally, the first layout: https://github.com/mwildehahn/reproduce-layout-rerender/blob/main/app/layout.tsx never re-renders once it loads. When deployed though, when you click "nested page", you'll notice the timestamp updates on every navigation.

[opr-inzn]

@mwildehahn Sure does look like it! Thanks for sharing!

[mwildehahn]

@timneutkens @balazsorban44 any advice for debugging this locally since I can only reproduce when deployed? I tried running a local version of next.js with NODE_ENV=production but that fails any request to the dev server.

[opr-inzn]

@mwildehahn @balazsorban44 @timneutkens btw disabling react strict mode does not fix the issue for me. Really hope we’re able to fix this!

[ztanner]

Hi, thanks for reporting this! This has been fixed and will become available once the changes are released to the Next.js builder.