Hydration
The process of attaching JavaScript event handlers and state to server-rendered HTML so a static-looking page becomes interactive.
· Reviewed by senior engineers
Hydration is the process by which a server-rendered or statically-generated page becomes interactive in the browser. The HTML arrives already painted; then the framework runs, walks the DOM, attaches event handlers and reconnects state. Until hydration finishes, the page looks ready but clicks may do nothing.
The trade-off is that hydration costs JavaScript — the browser has to download, parse and execute roughly the same component tree the server just rendered. For content-heavy pages this is wasteful and shows up as high Total Blocking Time and poor INP scores. The user sees the page instantly but cannot use it for another second or two.
Newer approaches reduce or replace hydration. React Server Components skip hydration for server-only components entirely. Partial or selective hydration (Astro islands, Qwik resumability) only hydrates the interactive parts. Progressive hydration breaks the work into idle-time chunks. Each has trade-offs, but the direction is clear: ship less JS, hydrate less of the page.
When we audit slow sites, the most common culprit is over-hydration — entire marketing pages shipping React app shells when 90% of the content is static. Splitting interactive widgets out of mostly-static pages is usually the single biggest performance win available.