In a Next.js application utilizing Static Site Generation (SSG), the root layout component re-renders upon navigating to a different route. This behavior leads to the loss of initially set random data within the root layout. A specific example of this issue is when a global color is injected into the root layout for the duration of a page visit; the color should persist across route changes. This functionality works as expected in development mode and in builds not outputted with export, but fails under SSG.
Clone my repo.
Inject random data (e.g., a global color) into the root layout component.
Navigate between pages/routes.
Observe that the global color (or any random data) resets, indicating a re-render of the root layout.
In dev mode: This is expected behavior. When route is changed, the layout color does not change
The initial random data (e.g., a global color) set in the root layout should persist across route changes, similar to its behavior in development mode and non-SSG builds.
Link to the code that reproduces this issue
https://github.com/Innei/next-ssg-layout-rerender-repro
To Reproduce
In a Next.js application utilizing Static Site Generation (SSG), the root layout component re-renders upon navigating to a different route. This behavior leads to the loss of initially set random data within the root layout. A specific example of this issue is when a global color is injected into the root layout for the duration of a page visit; the color should persist across route changes. This functionality works as expected in development mode and in builds not outputted with
export
, but fails under SSG.In dev mode: This is expected behavior. When route is changed, the layout color does not change
https://github.com/vercel/next.js/assets/41265413/b19e80a7-3aa0-48a0-b49e-5f0ae0b13ee3
And build with
export
.https://github.com/vercel/next.js/assets/41265413/dcbecfdb-ddad-4bcc-a59e-529821f6b794
Current vs. Expected behavior
The initial random data (e.g., a global color) set in the root layout should persist across route changes, similar to its behavior in development mode and non-SSG builds.
Provide environment information
Which area(s) are affected? (Select all that apply)
App Router, Static HTML Export (output: "export")
Which stage(s) are affected? (Select all that apply)
next build (local)
Additional context
No response