progressive-hydration

Progressive hydration reduces Time to Interactive in SSR React apps by delaying hydration for non-critical UI, preventing the main thread from blocking user input. It wraps below-the-fold or rarely used components in Suspense boundaries to defer their JavaScript execution.

To implement progressive hydration, wrap non-critical components in Suspense boundaries with meaningful fallbacks and use React.lazy for code-splitting. This defers the loading and hydration of below-the-fold widgets, establishing a developer-defined sequence for chunked hydration.

Progressive hydration is a technique that attaches client behavior to server-rendered markup progressively rather than all at once. Use it for SSR pages with partially interactive regions, such as below-the-fold widgets, where initial JavaScript can be safely deferred without impacting core functionality.

Yes, progressive hydration relies on React.lazy for code-splitting and Suspense boundaries to define fallbacks. This combination ensures less-important components load and hydrate later, reducing initial JavaScript cost while preserving server-rendered markup.

Yes, progressive hydration supports selective and prioritized hydration mechanisms. You can hydrate critical UI chunks first while deferring non-critical regions, ensuring that already-hydrated chunks remain responsive and avoid blocking user input during the process.