progressive-hydration

Selective hydration prioritizes user-visible components or interactions currently in view, allowing React to defer hydration of off-screen elements and reduce the initial JavaScript execution payload.

You can implement lazy loading and code-splitting in SSR by wrapping non-critical components with Suspense boundaries and using React lazy() or Next.js dynamic imports to hydrate them progressively after initial render.

Yes, progressive hydration integrates easily with Next.js by utilizing dynamic imports configured with ssr options, enabling server-rendered pages to defer non-critical JavaScript loading until components require interactivity.

Yes, setting up selective hydration boundaries requires React with Suspense and lazy support to provide graceful fallbacks while non-critical JavaScript chunks load on demand during the hydration process.

A slow Time To Interactive often occurs when the entire JavaScript payload hydrates simultaneously, blocking user interactions until completion, a problem progressive hydration solves by deferring non-critical chunks.