Next.Js Production: Dynamic Page With Route Loading.Tsx Gets Stuck In Throttled-Reveal State And Never Hydrates

The route-level loading.tsx wraps the page in a Suspense boundary that React's streaming renderer marks as throttled-reveal because the boundary content misses the first flush (simulated with a 150ms delay, but also triggered by small HTML size differences). In this state, the reveal function ($RV) is present in the runtime but never invoked for the stuck boundary. The page subtree lacks __reactFiber$ keys, indicating that the client React tree never attached fibers to those DOM nodes, so hydration never starts. This is a race condition in React's throttled reveal logic when the Suspense boundary is not part of the initial hydration tree and the reveal trigger is lost.

1. Clone https://github.com/beyond305/next-suspense-hydration-repro 2. Run `npm install && npm run build && npm start` 3. Open http://localhost:3017/demo 4. Click the counter button — it never increments. 5. Inspect comments in DOM: notice `$~` instead of `$` for the boundary; page subtree lacks __reactFiber$ keys.

This workaround increases the JavaScript bundle size because the page becomes a client component and data fetching occurs on the client. It may impact SEO and initial load performance since server-side rendering for the content is lost. Additionally, this is not a root-cause fix; the underlying bug in Next.js/React may still affect other server-side Suspense boundaries. If you cannot accept the client-side approach, monitor for upstream fixes in Next.js and upgrade when available. To rollback this change, restore the original page.tsx and loading.tsx files.