Partial Hydration
Коротко:
Partial Hydration — оптимизация rendering: вместо загрузки + гидратации всего React app, hydrate только компоненты, которые требуют клиентской interactivity. Zero JS для static-read-only блоков. Implementations: Islands (Astro), RSC (Next.js), Resumability (Qwik), Progressive Hydration (Marko).
Ниже: подробности, пример, смежные термины, FAQ.
Подробности
- Traditional SSR: HTML + весь JS bundle → client hydrate все
- Partial: HTML + малый JS bundle → hydrate только flagged components
- Savings: 60-95% JS reduction для typical blog/docs site
- Trade-off: more complex framework, need explicit interactivity markers
- Metrics: TTI (time to interactive), TBT (total blocking time) снижаются drastically
Пример
// 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 */}Смежные термины
Больше по теме
Часто задаваемые вопросы
SPA hydration — проблема?
Yes: download 200 KB React + 50 KB your code, execute всё, re-render server HTML. TBT огромный на mobile.
Qwik resumability?
Вместо hydration — serialize closures в HTML attributes, lazy-load on event. Zero initial JS для complex apps.
Measure?
Lighthouse Speed Index + TBT. Partial hydration drops от 3s → 0.3s на typical blog.