Hydration

Hydration is the process where JavaScript running in the browser attaches interactivity to server-rendered or pre-rendered HTML, turning a static page into a working application.

In modern JavaScript frameworks, a page is often delivered as HTML produced on the server or at build time, so users see content quickly. Hydration is the follow-up step: the framework loads its JavaScript, reconciles the existing markup with its component tree, and wires up event handlers so buttons, menus, and dynamic content respond. Until hydration completes, the page may look ready but not yet react to clicks.

For SEO, hydration matters in two ways. First, because the initial HTML is present before hydration, crawlers can read core content without executing scripts, which is good for indexing. Second, the cost of hydration affects performance and interactivity: heavy hydration can delay when a page becomes responsive and can hurt Interaction to Next Paint, a Core Web Vital with a good threshold of 200ms or less. Patterns like partial or progressive hydration aim to reduce that cost by only hydrating the parts that need interactivity.

When auditing a JavaScript site, check that the meaningful content exists in the served HTML rather than appearing only after hydration, and watch hydration's effect on responsiveness.

Related: JavaScript SEO and Rendering Guide, INP: Interaction to Next Paint