Hydration Process

Hydration is the process by which a JavaScript framework takes ownership of a server-rendered HTML page, attaches event listeners, restores application state, and makes the page fully interactive — all without discarding and re-rendering the existing DOM.

After SSR Rendering delivers an HTML page, the browser displays static content immediately. But that content is inert: buttons don't respond, forms don't submit, and dynamic state doesn't update. Hydration bridges the gap. When the JavaScript bundle loads and executes, the framework performs a reconciliation walk of the server-rendered DOM, matching existing DOM nodes to the component tree it would have rendered from scratch. Instead of replacing those nodes, it reuses them and attaches the corresponding JavaScript behavior (event handlers, refs, reactive state).

A key prerequisite for correct hydration is that the server-rendered HTML must exactly match what the client would render given the same initial state. If there is a mismatch — caused by browser-only APIs, non-deterministic data, or different time-zone assumptions — the framework detects it and either logs a warning or replaces the mismatched subtree entirely (called a hydration mismatch error). React and Vue both perform this check in development mode and skip it in production for performance.

The dehydrated state embedded in the page's