Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix Router stucks on page navigation in development [1 pull requests, 3 comments, 4 participants]

Official PRs (…)
ON THIS PAGE

Recommended Tools

×6

Utilities matched from this issue’s tags and category — try them while you read without losing context.

GitHub issue graph ai analysis

Paste a GitHub issue URL. We fetch that issue, discover linked issues from bodies/comments/timeline, collect linked pull requests, and produce a structured English report.

The report is written in English Markdown for sharing and archival.

Helpful · Quick feedback

Loading…
GitHub stats
vercel/next.js#92238•Fetched 2026-04-08 02:21:41
View on GitHub
Comments
3
Participants
4
Timeline
10
Reactions
0
Author
Quicksilver0218Quicksilver0218
Participants
avilovnavilovnben9bengben9bengicyJosephicyJosephQuicksilver0218Quicksilver0218
Timeline (top)
subscribed ×4commented ×3cross-referenced ×1issue_type_added ×1

PR fix notes

PR #92892: Fix dev mode hydration failure when page is served from HTTP cache

Description (problem / solution / changelog)

PR #88182 introduced an experimental option to use Cache-Control: no-cache instead of no-store in dev mode, and PR #91503 made it the default. With no-cache, browsers may serve the page from HTTP cache on back-forward navigation or tab duplication. The HTML, including the inline RSC payload, is restored from cache and all scripts re-execute.

In dev mode, React's Flight client uses a debug channel (a WebSocket-backed stream delivering component debug info) that adds dependencies to model chunk initialization. On a fresh page load, the WebSocket delivers this data and the dependencies resolve normally. On HTTP cache restore, however, the bootstrap script re-executes and creates a new debug channel stream, but the WebSocket doesn't re-send debug data for the cached payload's request ID. The debug dependencies are never fulfilled, blocking the entire model tree from initializing, so hydrateRoot is never called and the page loses all interactivity.

This is dev-only — production builds have no debug channel, so there are no stuck dependencies and no issue.

The fix buffers debug channel chunks in memory as they flow through the TransformStream in getOrCreateDebugChannelReadableWriterPair. Once all chunks have been received, the buffer is eagerly persisted to sessionStorage. When the page detects it was served from HTTP cache (via PerformanceNavigationTiming.transferSize === 0), createDebugChannel restores the debug data from sessionStorage and replays it as a synthetic ReadableStream instead of expecting it from the WebSocket. If the restore fails (e.g., quota exceeded during the earlier write, or the entry was overwritten by another page), the page falls back to location.reload() to get a fresh page from the server.

A regression test is included that navigates to an external page and verifies interactivity is preserved after clicking the browser back button. Tab duplication (which triggers the same HTTP cache restore) cannot be simulated in Playwright and was verified manually.

fixes #92238 fixes #91982 fixes #92687

Changed files

  • packages/next/src/client/dev/debug-channel.ts (modified, +115/-2)
  • test/e2e/app-dir/bfcache-regression/app/layout.tsx (added, +8/-0)
  • test/e2e/app-dir/bfcache-regression/app/page.tsx (added, +19/-0)
  • test/e2e/app-dir/bfcache-regression/bfcache-regression.test.ts (added, +41/-0)
  • test/e2e/app-dir/bfcache-regression/next.config.js (added, +6/-0)

Code Example

Operating System:
  Platform: Windows 10
  Arch: x86-64
  Version: Windows 10 Version 1809
Binaries:
  Node: 24.14.1
  npm: 11.11.0
Relevant Packages:
  next: 16.2.2
  eslint-config-next: 16.2.2
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/Quicksilver0218/next.js-dev-router-issue

To Reproduce

  1. Start the application in development (next dev).
  2. Open a new tab on a browser.
  3. Go to http://localhost:3000 on the new tab on the browser.
  4. Click the 'Test' button at the bottom. The message 'Test' will be prompted.
  5. Navigate back on the browser (click the back button).
  6. Navigate forward on the browser (click the forward button).
  7. Click the 'Test' button at the bottom again. Nothing happen.

Current vs. Expected behavior

Expected Behaviour The home page should be successfully loaded again. JavaScript should work and the message 'Test' will be prompted when the 'Test' button is clicked. The messages on the Dev Indicator should look like this.

<img width="250" height="227" alt="Image" src="https://github.com/user-attachments/assets/cd5d0772-2324-4ef2-bea0-9376165c4fa4" />

Current Behaviour JavaScript does not work. Nothing happen when the 'Test' button is clicked. The messages on the Dev Indicator look like this.

<img width="249" height="220" alt="Image" src="https://github.com/user-attachments/assets/9c680ffb-429b-477a-9a0a-f18511fefd28" />

Provide environment information

Operating System:
  Platform: Windows 10
  Arch: x86-64
  Version: Windows 10 Version 1809
Binaries:
  Node: 24.14.1
  npm: 11.11.0
Relevant Packages:
  next: 16.2.2
  eslint-config-next: 16.2.2
  react: 19.2.4
  react-dom: 19.2.4
  typescript: 5.9.3

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

Linking and Navigating

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

next dev (local)

Additional context

Can be reproduced in Next.js 16.2.0 Cannot be reproduced in Next.js 16.1.7

extent analysis

TL;DR

The issue can likely be fixed by upgrading to a newer version of Next.js or applying a workaround to handle the JavaScript execution issue after navigating back and forth in the browser.

Guidance

  • The problem seems to be related to the next dev mode and the way Next.js handles JavaScript execution after navigating back and forth in the browser.
  • To verify the issue, try reproducing the steps in the issue description and check if the JavaScript code is executed as expected after navigating back and forth.
  • Try upgrading to a newer version of Next.js to see if the issue is fixed, as it cannot be reproduced in Next.js 16.1.7.
  • If upgrading is not possible, try to find a workaround to handle the JavaScript execution issue, such as adding a check to ensure the JavaScript code is executed after navigating back and forth.

Example

No code snippet is provided as the issue is more related to the configuration and version of Next.js rather than a specific code issue.

Notes

The issue seems to be specific to Next.js version 16.2.0 and later, and it's not clear what changes were made in these versions that caused the issue. More investigation is needed to determine the root cause of the problem.

Recommendation

Apply workaround: As the issue cannot be reproduced in Next.js 16.1.7, it's likely that the issue is specific to the newer versions of Next.js. Applying a workaround to handle the JavaScript execution issue after navigating back and forth in the browser might be the best solution until the issue is fixed in a future version of Next.js.

Vote matrix · Quick signals

Works
Did the solution work? Tap to confirm.
Easy Fix
Was it a quick fix?
Time Saver
Did it save you time?
Blocking
Was it severely blocking?
Common Issue
Are others likely hitting this too?
Flaky / Intermittent
Is it intermittent?
Verified / Reproducible
Can you reproduce it reliably?
Loading…
#inference speed#output truncation#response parsing#generation error#database connection

Still need to ship something?

×6

Another batch ranked right after the header list — different links, same matching logic.

Back to top recommendations

TRENDING