Frontend · interactive

Hydration

Server rendering gets content on screen early, but the page can't respond to clicks until its JavaScript has loaded and hydrated it. Compare when users see the page and when they can use it. Times are simplified, for a mid-range phone.

blank screen visible, clicks do nothing interactive

Server rendering + hydration: content at 300 ms, clickable at 2250 ms, 1950 ms where clicks are ignored.

JavaScript bundle

Focus

Step 2 of 4 · read left to right

1
Client rendering: blank until JS runs
The HTML is an empty shell. Nothing shows until the bundle downloads and runs.
Bigger bundle, longer blank screen.
2
Server HTML shows content early
The browser paints the HTML as soon as it arrives. It looks finished.
But buttons are still plain HTML with no handlers.
3
Hydration attaches the handlers
React runs the components again in the browser, matches them to the existing HTML, and wires up events. Until then, clicks are lost. If the HTML differs from what the client renders (a date, a random id), React warns and patches it.
Usable at 2250 ms with 300 KB.
4
Hydrate only what's interactive
Islands and React Server Components send no JavaScript for static parts, so the interactive bits are ready sooner.
Usable at 593 ms.

In production

Tools and technologies

Modern frameworks compete on how little they hydrate.

Not tied to one language — use these names when you search docs or design a system.