progressive-hydration

Implement progressive hydration to defer non-critical client-side hydration in SSR React apps. This reduces Time to Interactive delays by keeping above-the-fold content responsive while below-the-fold widgets hydrate on demand.

Progressive hydration defers client-side hydration of non-critical UI until needed. Use it for SSR pages with partially interactive regions like below-the-fold widgets, rarely used panels, and viewport-dependent components to prevent blocking user input.

Defer hydration by wrapping non-critical React components in Suspense boundaries and lazy-loading them. This applies code-splitting so deferred chunks load without blocking hydrated user input, ensuring only important parts hydrate first.

Yes, progressive hydration works with Next.js dynamic client-only loading and Suspense. You can prioritize hydration boundaries and use these features to ensure code-split deferred chunks load safely without blocking interactive regions.

Your server-rendered React page feels frozen because the browser is busy hydrating the entire DOM at once. By deferring hydration of non-critical sections using Suspense fallbacks, you avoid frozen-looking UI while preserving SSR benefits.