NextJS 13 layout re-render when changing route

[Yoinky3000]

Verify canary release

• [X] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: linux Arch: x64 Version: #100~18.04.1-Ubuntu SMP Mon Oct 17 11:44:30 UTC 2022 Binaries: Node: 16.18.0 npm: 8.19.2 Yarn: 3.2.4 pnpm: 7.14.1 Relevant packages: next: 13.0.1-canary.0 eslint-config-next: 13.0.0 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

edge 107.0.1418.26

How are you deploying your application? (if relevant)

next dev

Describe the Bug

the layout component re-render when changing the route

Expected Behavior

the layout should not re-render

Link to reproduction

https://codesandbox.io/s/suspicious-bessie-h9wlwe

To Reproduce

run the dev command, visit the /test route, click the button few times to increase the count, click the "go to id 1/2" button to go to leaf segment, and the count will reset

[timneutkens]

Had a look at this one and the application is working as expected locally, the problem only surfaces on codesandbox as it's replying with a wrong response. I've reached out to Ives from Codesandbox and they're looking into this, will keep you updated 👍

[AoverK]

I noticed this issue on my most recent version of nextjs where it renders differently in vercel than on my local machine when running npm run dev.

Verify canary release

• [x] I verified that the issue exists in the latest Next.js canary release

Provide environment information

Operating System: Platform: linux Arch: x64 Version: #100~18.04.1-Ubuntu SMP Mon Oct 17 11:44:30 UTC 2022 Binaries: Node: 16.18.0 npm: 8.19.2 Yarn: 3.2.4 pnpm: 7.14.1 Relevant packages: next: 13.0.1-canary.0 eslint-config-next: 13.0.0 react: 18.2.0 react-dom: 18.2.0

What browser are you using? (if relevant)

edge 107.0.1418.26

How are you deploying your application? (if relevant)

next dev

Describe the Bug

the layout component re-render when changing the route

Expected Behavior

the layout should not re-render

Link to reproduction

https://codesandbox.io/s/suspicious-bessie-h9wlwe

To Reproduce

run the dev command, visit the /test route, click the button few times to increase the count, click the "go to id 1/2" button to go to leaf segment, and the count will reset

[timneutkens]

I noticed this issue on my most recent version of nextjs where it renders differently in vercel than on my local machine when running npm run dev.

Can you provide a reproduction?

[Yoinky3000]

Had a look at this one and the application is working as expected locally, the problem only surfaces on codesandbox as it's replying with a wrong response. I've reached out to Ives from Codesandbox and they're looking into this, will keep you updated 👍

I also have this issue when run it in my local machine and in github codespace, so i dont think it is the problem from codesandbox?

[Yoinky3000]

https://user-images.githubusercontent.com/65208589/199731953-d5bb0c83-bb1e-4356-9a5c-f533a2004714.mp4

here's the video of running the reproduction in my github codespace

[timneutkens]

I also have this issue when run it in my local machine

Can't reproduce it locally, maybe you have a proxy in front that's stripping __rsc__ headers. We're planning to change these to no longer have _ as they're being stripped by nginx.

[timneutkens]

This is now fixed on codesandbox: https://codesandbox.io/p/sandbox/happy-stallman-tlztle?file=%2Fapp%2Ftest%2F%5Bid%5D%2Fpage.tsx

I've opened a PR to rename the headers to something that wouldn't be stripped: #42164

[dumbravaandrei22]

Hello!

I have a similar issue.

With next dev: It seems that the RootLayout always mounts & unmounts the components inside it on the first-page render.

With next build + start: When navigating via <Link>, my AppContext that is located in the RootLayout gets mounted and mounted again when navigating via <Link>.

[timneutkens]

@dumbravaandrei22 please provide a full reproduction.

[dumbravaandrei22]

@timneutkens

I forked your above codesandbox here.

I've created FooCoomponent.tsx:

Please see the browser logs:

1. I expect too see only one "#debug1 --- Foo component mounted" log and no "#debug1 --- Foo component unoumetd" logs
2. I expect to see multiple "#debug1 --- Foo component rendered" while I navigate via Link (because children is changing for FooComponent)

[timneutkens]

1. That's because of React Strict Mode: https://reactjs.org/docs/strict-mode.html
2. The Foo component is part of the layout so it doesn't rerender when you navigate a sub-layout

[dumbravaandrei22]

@timneutkens Thank you! I managed to solve the issues. I deactivated the strict mode https://nextjs.org/docs/api-reference/next.config.js/react-strict-mode

[github-actions[bot]]

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.