Hydration

Hydration is the step where a web framework that does server-side rendering pairs the static HTML the server produced with the JavaScript that makes it interactive. The browser parses the HTML, downloads the JS bundle, and the framework walks the existing DOM, attaching event listeners and reconciling state — without re-rendering anything visible.

A hydration mismatch happens when the server-rendered HTML doesn’t match what the client component would render on first pass. Common causes: branching on `typeof window`, calling `Math.random()` or `Date.now()` during render, formatting dates in user-locale-specific ways. React logs a warning, then re-renders the mismatched subtree on the client — costing bandwidth and breaking the seamless transition.

The modern remedy is React Server Components and selective client islands, which limit hydration to the components that actually need it. Plus `useSyncExternalStore` for reading values that legitimately differ between server and client.