ハイドレーションとは？サーバーの HTML をインタラクティブにする

ハイドレーションとは、クライアントサイドの JavaScript がすでにレンダリング済みの HTML に結び付き、サーバーでレンダリングされた静的なページをインタラクティブなアプリに変えるステップです。

SSR や SSG では、ブラウザは最初にすぐ表示できる完成した HTML を受け取ります。しかしその HTML にはまだ挙動がありません。ハイドレーションは、JavaScript フレームワークが既存の DOM をたどり、そのコンポーネントツリーを再接続し、イベントハンドラーを結線するプロセスです。これを誤ると、恐ろしいハイドレーションミスマッチ（hydration mismatch）が発生します。

ハイドレーションが必要な理由

サーバーでレンダリングされた HTML はコンテンツを表示しますが、イベントリスナーはありません。ハイドレーションによって、フレームワークはマークアップを再構築するのではなく既存のものを採用し、インタラクティブ性を結び付けるため、ボタン、フォーム、ナビゲーションが動作し始めます。

ハイドレーションミスマッチ

サーバーが生成した HTML がクライアントがレンダリングするものと異なると、ハイドレーションは壊れます。よくある原因は、レンダリング中にランダムな値、タイムスタンプ、ブラウザ専用の API を使うことです。修正方法は、サーバーとクライアントが同じ出力をレンダリングするようにすることです。

ハイドレーションのコスト

• コンポーネントツリー全体をブラウザで再度実行する必要があります。
• 大規模なアプリは、見た目は準備できていても、インタラクティブになるのが遅く感じられることがあります。
• より多くの JavaScript を送ることは、より多くのハイドレーション作業を意味します。

より新しいアプローチ

パーシャルハイドレーションおよびプログレッシブハイドレーションは、インタラクティブな部分だけをハイドレートし、islands アーキテクチャはページ全体ではなく分離されたコンポーネントをハイドレートします。これにより、ページが利用可能になる前に実行しなければならない JavaScript が減ります。

ハイドレーションと CI/CD

ハイドレーションはブラウザのランタイムの挙動ですが、ビルドがサーバーとクライアントで一致したバンドルを生成することに依存します。CI は、プロダクションビルドと、レンダリングされたページを読み込んでコンソールにハイドレーションエラーなくインタラクティブになることを確認する end-to-end テストを実行することで、不一致を防げます。

重要なポイント

• ハイドレーションは、サーバーでレンダリングされた HTML に JavaScript の挙動を結び付けます。
• サーバーとクライアントの出力の不一致はハイドレーションを壊します。レンダリング出力を同一に保ちましょう。
• CI は、プロダクションビルドに対する end-to-end テストでハイドレーションエラーを検出できます。

関連ガイド