Partial Hydration
Partial hydration is a rendering strategy in which only specific interactive portions of a server-rendered page are hydrated with JavaScript on the client, while the rest of the page remains static HTML. It reduces the amount of JavaScript…
Definition
Partial hydration is a rendering strategy in which only specific interactive portions of a server-rendered page are hydrated with JavaScript on the client, while the rest of the page remains static HTML. It reduces the amount of JavaScript shipped and executed compared to hydrating an entire page.
Overview
Traditional server-side rendering in frameworks like early React or Vue renders full HTML on the server for fast first paint, but then 're-hydrates' the entire page on the client by re-running the same component tree in the browser to attach event listeners and restore interactivity. This full-page hydration is expensive: even mostly static content (headers, footers, article text) gets bundled, parsed, and hydrated as if it were interactive, which slows down time-to-interactive, especially on lower-powered devices. Partial hydration addresses this by hydrating only the components that actually need interactivity — a carousel, a comment form, a like button — while leaving the surrounding static markup as plain HTML that never receives a JavaScript event listener or virtual DOM tree. This dramatically cuts the JavaScript bundle size sent to the client and the CPU work spent on hydration, since inert content is skipped entirely rather than hydrated and then effectively doing nothing. The technique is most closely associated with the Islands Architecture pattern, pioneered in frameworks like Astro, Marko, and (earlier) Preact-based approaches, where each interactive component is an independent 'island' hydrated on its own schedule and trigger — for example, hydrating only when the island scrolls into view, when the browser is idle, or immediately on load, depending on its declared priority. Partial hydration is distinct from but often paired with 'resumability,' a related but different approach used by frameworks like Qwik, which avoids traditional hydration altogether by serializing application state into the HTML and resuming execution lazily on interaction rather than re-executing component code upfront. Partial hydration matters because it directly targets one of the biggest performance costs in modern JavaScript-framework-rendered sites: unnecessary client-side re-execution of code whose only job was to have already produced static markup.
Key Concepts
- Hydrates only interactive components, leaving static markup untouched
- Reduces JavaScript bundle size and parse/execution time on the client
- Often implemented via per-component hydration directives (e.g., on load, on visible, on idle)
- Core mechanism behind the Islands Architecture pattern
- Improves Time to Interactive and Total Blocking Time performance metrics
- Distinct from, but complementary to, resumability approaches like Qwik's
- Supported natively in frameworks such as Astro, Marko, and Fresh