Hydrationとは？

Hydration（ハイドレーション） は、サーバーで生成された静的HTMLに、クライアント側でJavaScriptを「注水」して対話機能を有効化するプロセス。SSR/SSG後の重要な段階です。

フロー

  1. サーバー: 静的HTMLを送信
  2. ブラウザ: HTML表示（速い）
  3. JavaScriptダウンロード・実行
  4. Hydration: イベントハンドラー登録・状態復元
  5. 対話可能に

問題点

  • JSダウンロード中は対話できない
  • 巨大なアプリでは Hydration 自体が遅い
  • INP（応答性）悪化の原因

解決策

React Server Components と Partial Hydration により、必要な部分のみHydration。Next.js App Routerで自動最適化されています。

関連用語

Tufe Companyのソリューション