Selective Hydration

What is Selective Hydration?

For websites that need both interactive elements and SEO performance, Selective Hydration is the most pragmatic solution. Frameworks like Astro use this principle with their Islands Architecture: only buttons, forms, and dynamic elements are activated with JavaScript, while all content loads immediately as static HTML. The result is significantly better Core Web Vitals with full interactivity.

Selective Hydration is a performance optimization technique that solves the problem of full hydration in server-side rendered (SSR) applications. With classic hydration, all of a page’s JavaScript code must be downloaded and executed before individual components become interactive. Selective Hydration instead prioritizes the components the user is most likely to interact with and hydrates these first.

React 18 has natively introduced Selective Hydration. React can recognize which components the user wants to use — for example through hover or click — and prioritizes hydrating these. Less important components are deferred or processed only on demand. The result is faster interaction times and better Core Web Vitals because the page doesn’t have to wait for complete hydration.

For technical SEO, Selective Hydration is a middle ground between full hydration and more radical approaches like Resumability or Islands Architecture. The server delivers complete HTML that Google can read without executing JavaScript — this conserves the Rendering Budget. At the same time, all the advantages of a React application are retained. If you’re optimizing an existing React or Next.js application, Selective Hydration is often the most pragmatic first step.