Partial Hydration
Key idea:
Partial Hydration — rendering optimisation: instead of loading + hydrating the entire React app, hydrate only components that need client-side interactivity. Zero JS for static read-only blocks. Implementations: Islands (Astro), RSC (Next.js), Resumability (Qwik), Progressive Hydration (Marko).
Below: details, example, related terms, FAQ.
Details
- Traditional SSR: HTML + full JS bundle → client hydrates everything
- Partial: HTML + small JS bundle → hydrate only flagged components
- Savings: 60-95% JS reduction for typical blog/docs site
- Trade-off: more complex framework, needs explicit interactivity markers
- Metrics: TTI (time to interactive), TBT (total blocking time) drop dramatically
Example
// Astro — client directives
<StaticHero /> {/* zero JS */}
<LikeButton client:load /> {/* hydrate immediately */}
<Comments client:visible /> {/* hydrate when scrolled to */}
<CartModal client:media="(max-width: 768px)" /> {/* mobile only */}Related Terms
Learn more
Frequently Asked Questions
Why is SPA hydration a problem?
You download 200 KB React + 50 KB your code, execute it all, re-render server HTML. TBT huge on mobile.
Qwik resumability?
Instead of hydration — serialise closures in HTML attributes, lazy-load on event. Zero initial JS for complex apps.
How to measure?
Lighthouse Speed Index + TBT. Partial hydration cuts from 3s → 0.3s on a typical blog.