Hydration

Hydration is the process where client-side JavaScript takes over server-rendered HTML to make it interactive. The server sends complete HTML, then JavaScript "hydrates" it by attaching event listeners, initializing state, and connecting to the framework's reactivity system.

Traditional hydration re-renders the entire component tree on the client side, matching it against the server HTML. This can be expensive — the browser downloads and executes JavaScript for all components, even those that don't need interactivity.

Modern approaches optimize hydration. Partial hydration (used by Astro) only hydrates interactive components ("islands"), leaving static content as plain HTML. Progressive hydration defers hydrating off-screen components until they're needed. Resumability (Qwik's approach) serializes the application state so the client can resume without re-executing initialization code.

Astro's "islands architecture" is particularly efficient — it sends zero JavaScript by default and only hydrates components marked with client:load, client:visible, or client:idle directives.