Hydration

定義

Hydration（ハイドレーション） は、サーバが返した静的 HTML に対し、ブラウザ側で JavaScript フレームワークが状態やイベントハンドラを再構築して、ページをインタラクティブにする処理のこと。
直訳すると「水を与える＝乾いた HTML に動きを与える」。

詳細

Next.js などの SSR / SSG では、ページの初回表示を高速にするため HTML をあらかじめ生成して送る。
ブラウザは何もしなくても文字や画像が見えるが、ボタンを押しても動かない。

そこに React の JS バンドルが届いて hydrateRoot() が走ると、サーバが生成した DOM ツリーをスキャンしながら、各ノードに onClick などのリスナーや state を結びつける。
これが Hydration。

よくある誤解

• クライアント側で再描画している：再描画ではない。
  サーバが作った DOM を「そのまま使う」ことが前提で、ノードを作り直すと逆に遅くなる。
• 完全に透明な処理：実際にはサーバとクライアントの出力が一致していないと Hydration mismatch が発生する。new Date() / Math.random() / typeof window 分岐などが典型的な原因。

関連

React Server Components や Streaming SSR では、Hydration の単位やタイミングが従来とは異なる（Selective Hydration、Progressive Hydration）。