Hydration

Server HTML arrives looking finished, then JavaScript loads and wires up the handlers so the page actually responds.

hydratehidrationrehydrating server-rendered HTMLthe page looks ready but nothing clicks yetwaking up the HTMLattaching JavaScript to server-rendered HTMLbuttons dead until the script loadshydration mismatch

See it

Live demo coming soon

What it is

Server rendering gives you HTML that looks finished but is only half wired. The native parts already work: links navigate, forms submit to their action, a details element opens. What is missing is everything the framework manages, so no component state, no click handlers, no controlled inputs. Hydration is the second pass where the framework runs the same components in the browser, walks the existing DOM, and attaches the behavior instead of rebuilding the markup from scratch. After it finishes, the page you were already looking at starts responding.

The window between 'looks done' and 'actually works' is the uncanny valley of web performance: people tap, nothing happens, they tap again. Shrink it by shipping less JavaScript to hydrate. That is the whole point of islands architecture (hydrate only the interactive regions), selective hydration (React prioritizes the part being interacted with), and server components (some trees never hydrate at all).

The classic failure is a hydration mismatch: the server rendered one thing and the client rendered another. React reports it and regenerates the affected subtree in the browser, which usually means a console error and a visible flicker. The usual culprits are Date.now(), Math.random(), locale date formatting, localStorage reads, and 'typeof window' checks during the first render. Keep browser-only work in an effect or behind a client-only boundary.

Ask AI for it

Server-render this page and hydrate it on the client, making the server and the client produce matching initial markup and UI state on the first render: no Date.now(), Math.random(), locale-dependent date formatting, or window/localStorage reads during render. Move all browser-only logic into useEffect or a client-only component loaded with dynamic(..., { ssr: false }). Hydrate the interactive widgets only, leave the static content as plain HTML, and make submit buttons show a pending state so nobody taps a control that is not wired up yet.

You might have meant

server side renderingclient side renderingislands architecturereact server componentsstreaming rendering