株式会社オブライト
Web Frontend2026-05-17

Hydration

Also known as: ハイドレーション / クライアントハイドレーション

The process of attaching JavaScript to server-rendered static HTML to make it interactive. HTML is visible immediately, but click events and other interactions may be non-functional until hydration completes.


Overview

During hydration, React reconciles the server-generated DOM tree with the virtual DOM and attaches event listeners. Slow hydration delays TTI (Time to Interactive). RSC eliminates hydration for server-only components, reducing client JavaScript.

Partial Hydration and Islands

Approaches like Astro's Islands Architecture and Qwik's Resumability hydrate only the parts that need it. This dramatically reduces initial JS payload and improves Core Web Vitals INP scores.

Related Columns

Related Terms

Feel free to contact us

Contact Us