vercel / vercel/next.js

RootLayout static Metadata & Viewport flickers on client navigation to dynamic page with loading.tsx

Open
#75,334 3 comments 6 reactions 0 assignees View on GitHub

Nobody has claimed this yet.

Metadata
Dominant language
JavaScript
Stars
142k
Forks
32.4k
Avg merge
2d 14h
Merged PRs (30d)
351

Description

Link to the code that reproduces this issue

https://codesandbox.io/p/devbox/kind-dream-ppgptn

To Reproduce

When using the App Router, if you have a RootLayout with static metadata (viewport, title), it works great when navigating across static pages. The metadata never changes, the title remains the same for all subpages of that layout.

As soon as you create a dynamic page (e.g. await connection()) then navigate to that page using a component, and create a "loading.tsx" for that dynamic page, it will Suspend the static metadata when you navigate to it, this causes the title to flicker. I was just ignoring at first, but when I tested my PWA I noticed my viewport theme was flickering, which was causing jarring issues since I have dynamic changes to the themeColors in my client (next-themes)

This led me down the rabbit hole to try to figure out why my parent static Layout wasn't getting immediately rendered. I discovered that the solution was indeed "loading.tsx". As soon as I delete loading.tsx, the metadata stopped flickering. I had to create a "Suspense wrapper" around my dynamic page to fix it. This works, but it adds extra boilerplate code to every dynamic page. It also means I cannot benefit from using "loading.tsx" at all in my project, since that will force the static RootLayout's metadata & viewport to be suspended, causing flickers.

Current vs. Expected behavior

Current:
Dynamic async pages cause reload flickers of parent static RootLayout metadata & viewport when loading.tsx is present.

Expected:
loading.tsx should not suspend or clear/reload the RootLayout's static metadata & viewport, loading.tsx should only suspend the page itself.

This bug only happens after builds, not during next dev

Provide environment information
Production App Router
Next.js 15.1.6 & canary
Which area(s) are affected? (Select all that apply)

Metadata, Navigation

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

next start (local), Vercel (Deployed)

Additional context

No response

Contributor guide

Open the contributing guide

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

Research direction

Start with the linked CodeSandbox reproduction and compare client navigation in a production build with and without loading.tsx. Trace the RootLayout static metadata and viewport behavior around the dynamic page and loading boundary. Done means loading.tsx still works without flickering or clearing the parent metadata and viewport.

Written by the indexing model from the issue text.

Assessment

Tech stack
javascript, next.js, react
Domain
frontend, web-dev
Issue type
Bug
Difficulty
4/5
Estimated time
3-5 days
Activity status
Stale
Clarity
Mostly clear
Newbie friendliness
35/100

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.