Back to glossary

Term

Hydration

The process by which static HTML rendered on the server is retroactively given JavaScript interactivity in the browser — turning "dead" markup into a reactive app.

Hydration — explained in more detail

Classic SSR frameworks like React, Vue or Svelte deliver ready HTML on the first request — users see something immediately, LCP is good. To make buttons clickable and state work, the browser additionally loads the JavaScript bundle and “hydrates” the HTML: event handlers are attached, component state is built up, the virtual DOM is reconciled with the real DOM.

This carries a performance cost: hydration briefly blocks the main thread and can worsen INP. Modern answers are partial hydration (hydrate only interactive islands — like Astro’s Islands), selective/progressive hydration (prioritized by visibility), and resumability (Qwik skips hydration entirely).

Example / practical use

An Astro page with three <Counter client:visible /> components hydrates only those three islands once they scroll into the viewport — the rest of the static HTML stays JavaScript-free.

SSR is a prerequisite for hydration; without pre-rendered HTML there’s nothing to hydrate (that would be CSR). Resumability (Qwik) is the counter-position: resume serialized state instead of rebuilding it.

Entdecke mehr