Issue Station
Sign In
Tools hereToolbox

nextjs - ✅(Solved) Fix [Turbopack] Pages Router hydration delayed when tab opened in background [1 pull requests, 6 comments, 5 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#90684•Fetched 2026-04-08 00:19:37
View on GitHub
Comments
6
Participants
5
Timeline
8
Reactions
0
Author
happyjoshhappyjosh
Participants
christopherjohnson3028-stackchristopherjohnson3028-stackhappyjoshhappyjoshjonas-is-codingjonas-is-codingorigamiumorigamiumzhangshipeng-createzhangshipeng-create
Timeline (top)
commented ×5cross-referenced ×1issue_type_added ×1labeled ×1

Fix Action

Fixed

PR fix notes

PR #90708: fix: avoid blocking hydration on rAF in background tabs [superseded]

Description (problem / solution / changelog)

Superseded by a follow-up PR with tests and improved description.

Changed files

  • packages/next/src/client/dev/fouc.ts (modified, +9/-2)
  • packages/next/src/client/next-turbopack.ts (modified, +1/-3)

Code Example

- Next.js: 16.x
- React: 19.x
- Turbopack: enabled
RAW_BUFFERClick to expand / collapse

Link to the code that reproduces this issue

https://github.com/happyjosh/turbopack-pages-router-bug

To Reproduce

  1. Create minimal _app.tsx with timing logs
  2. Use yarn dev --turbopack
  3. Middle-click a link to open page in background tab
  4. Switch to the new tab and check console logs

Current vs. Expected behavior

When opening a Pages Router page in a background tab (middle-click or right-click -> open in new tab), the hydration is significantly delayed until the tab becomes visible.

Observed behavior:

  • Module loads at ~1200ms with visibilityState: hidden
  • App render happens at ~9200ms with visibilityState: visible
  • ~8 seconds delay between module load and React hydration

Expected behavior: Hydration should complete regardless of tab visibility.

Provide environment information

- Next.js: 16.x
- React: 19.x
- Turbopack: enabled

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

Turbopack

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

next build (local)

Additional context

Key Finding

  • Pages Router + Turbopack: Has this delay
  • App Router + Turbopack: Works correctly (no delay)
  • Pages Router + Webpack: Works correctly (no delay)

extent analysis

Fix Plan

To resolve the hydration delay issue with Turbopack and Pages Router, we need to adjust the timing of when hydration occurs.

  1. Disable Turbopack's default behavior of delaying hydration when the tab is not visible.
  2. Force hydration to occur immediately after the module loads, regardless of the tab's visibility state.

Here's an example of how you can achieve this:

// _app.tsx
import { useEffect } from 'react';

function MyApp({ Component, pageProps }) {
  useEffect(() => {
    // Force hydration to occur immediately
    document.visibilityState === 'hidden' && document.dispatchEvent(new Event('visibilitychange'));
  }, []);

  return <Component {...pageProps} />;
}

export default MyApp;

Alternatively, you can also try to override Turbopack's configuration to disable this behavior. However, this approach may require more experimentation and is not as straightforward as the code snippet above.

Verification

To verify that the fix worked, follow the steps to reproduce the issue and check the console logs. The hydration should now complete immediately, regardless of the tab's visibility state. The delay between module load and React hydration should be significantly reduced or eliminated.

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…
#api#ssr#installation#tensor shape#autograd error#device allocation#model download#tokenizer error#prompt formatting#chain error

Still need to ship something?

×6

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

Back to top recommendations

TRENDING