TechnicalRehydration

Hydration

Attaching client-side JavaScript behaviour to server-rendered HTML so a static page becomes interactive.

In full

Hydration is the point where SSR's fast paint meets the cost of shipping and executing the framework, and it is a common cause of poor INP: the page looks ready but does not respond until hydration finishes. Techniques such as partial, progressive, islands and selective hydration reduce this by hydrating only interactive regions. A hydration mismatch, where client output differs from server HTML, can also cause content to be replaced after render.

Example

A 400 KB bundle blocks the main thread for 900 ms after paint, so early taps on the menu do nothing and INP measures over 500 ms.

Related terms

Server-side rendering

Generating a page's full HTML on the server for each request, so crawlers and users receive complete markup without executing JavaScript.

Interaction to Next Paint

A Core Web Vital measuring overall responsiveness as the latency of the worst (approximately) interaction on a page; good is 200 ms or…

Single-page application

An architecture where one HTML shell loads and JavaScript handles all subsequent routing and content updates without full page loads.

JavaScript rendering

The execution of a page's client-side JavaScript by a search engine so that content and links generated at runtime become indexable.

Progressive enhancement

A build strategy that starts with working HTML and layers on CSS and JavaScript, so core content and navigation function without scripts.