progressive-hydration

To defer hydration in a React SSR app, wrap non-critical UI sections in Suspense boundaries and use dynamic imports. This progressively hydrates components, delaying non-critical JavaScript execution until needed to improve Time to Interactive.

Progressive hydration is a technique that balances fast server-rendered pages with interactive client behavior by selectively hydrating critical components first. It defers non-critical JavaScript to improve Time to Interactive without sacrificing overall user experience.

Next.js dynamic imports support selective hydration for client-only widgets. By leveraging React.lazy and Suspense boundaries, you can code-split and defer hydration of non-critical sections until they are required for interaction.

Code-splitting and selective hydration are best achieved by wrapping non-critical components in Suspense boundaries. This allows the application to hydrate critical parts first, accelerating initial paint while keeping full interactivity available on demand.

Progressive hydration should not be used for critical, above-the-fold UI sections that require immediate interactivity. It is specifically designed for non-critical UI sections that can defer hydration, so applying it to essential components delays user interaction.

Server-rendered pages remain non-interactive because the JavaScript must hydrate the UI before user actions register. Progressive hydration solves this by selectively hydrating critical components first and deferring non-critical JavaScript execution.