Selective hydration

Summary

Not every server-rendered region hydrates immediately — prioritize interactive islands (inputs, cart) over static content. Reduces main-thread work at load and improves TTI/INP. Requires framework support (React 18+, Next.js App Router patterns). Wrong priority hydrates heavy below-fold widgets before LCP interaction targets.

Code example

// Priority: hydrate interactive regions first
hydrateRoot(document.getElementById('root'), (
  <>
    <SearchBar /> {/* hydrates immediately */}
    <Suspense><Comments /></Suspense> {/* deferred */}
  </>
));

Key points

• Not every server-rendered region hydrates immediately — prioritize interactive islands (inputs, cart) over static content.
• Reduces main-thread work at load and improves TTI/INP.
• Requires framework support (React 18+, Next.js App Router patterns).
• Wrong priority hydrates heavy below-fold widgets before LCP interaction targets.

Further reading

• Selective hydration
• Streaming SSR

Related concepts

• Suspense boundaries
• Server Components