Hydration
Hydration is the process of attaching JavaScript event handlers and state to server-rendered HTML on the client — the page is visible immediately (fast FCP) but interaction works only after hydration completes. Modern frameworks (React, Vue, Svelte) all use some form of hydration when combining SSR/SSG with client interactivity.
Hydration is a meaningful cost: the framework must walk the DOM tree, match it to component definitions, attach handlers, and reconcile state. For large pages, hydration can take hundreds of ms and blocks the main thread. Modern strategies reduce hydration cost: progressive hydration (hydrate above-the-fold first), selective hydration (only interactive parts hydrate), island architecture (most of the page never hydrates), and React Server Components (server-only components ship no client code). The Core Web Vitals metric most affected by hydration is INP (Interaction to Next Paint).
Related terms
- Server component
A server component (React Server Components) is a React component that runs only on the server — it can fetch data directly from the database, use server-only secrets, and ship zero JavaScript to the client.
- Island architecture
Island architecture is the frontend pattern where most of a page is static server-rendered HTML with no client JavaScript, and only the interactive components (the 'islands') hydrate independently.
- Real user monitoring (RUM)
Real user monitoring (RUM) instruments actual user sessions in the browser or mobile client to capture performance and error metrics as users experience them — Core Web Vitals (LCP, INP, CLS), JavaScript errors, network requests, custom timing marks.