vercel / next.js

The React Framework
https://nextjs.org
MIT License
125.01k stars 26.7k forks source link

Root Layout Re-renders on Route Change in SSG(output: export), Causing Loss of Initial Random Data #63082

Open Innei opened 6 months ago

Innei commented 6 months ago

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.

  1. Clone my repo.
  2. Inject random data (e.g., a global color) into the root layout component.
  3. Navigate between pages/routes.
  4. 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

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

Operating System:
  Platform: darwin
  Arch: arm64
  Version: Darwin Kernel Version 23.3.0: Wed Dec 20 21:31:00 PST 2023; root:xnu-10002.81.5~7/RELEASE_ARM64_T6020
Binaries:
  Node: 20.8.1
  npm: 10.2.4
  Yarn: 1.22.21
  pnpm: 8.15.4
Relevant Packages:
  next: 14.1.3
  eslint-config-next: N/A
  react: 18.2.0
  react-dom: 18.2.0
  typescript: 5.4.2
Next.js Config:
  output: export

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

jlhervy commented 4 months ago

Hi, have you found a solution ? I opened a ticket yesterday, and it seems I have the exact same problem as yours.

https://github.com/vercel/next.js/issues/64882

Innei commented 4 months ago

Not yet.