# クライアントサイドでのハイドレーション

ハイドレーション（Hydration）とは、Vue がサーバから送られてきた静的 HTML を引き継いで、クライアントサイドのデータ変更に対応できる動的な DOM に変換するクライアントサイドのプロセスのことです。

entry-client.js では、この行でアプリケーションをマウントしているだけです:

app.mount('#app')

サーバはすでにマークアップをレンダリングし終わっているので、それを捨ててすべての DOM 要素を再生成したくないことは当然です。代わりに、静的マークアップを「ハイドレート」してインタラクティブにします。

Vue は、クライアントサイドのコード（ここでは entry-client.js）で使うため、 createSSRApp メソッドを用意していて、すべての DOM 要素を再生成する代わりに、既存の静的 HTML をハイドレートするように Vue へ指示します。

# ハイドレーションの注意点

Vue はクライアントサイドで生成された仮想 DOM ツリーがサーバからレンダリングされた DOM 構造と一致するかを検証します。不一致がある場合、ハイドレーションを中止し、既存の DOM を破棄して、最初からレンダリングします。ブラウザのコンソールには警告が表示されますが、サイトは引き続き動作します。

SSR が動作していることを確かめる一番の重要な方法は、アプリケーションの状態がクライアントとサーバで同じであるか確認することです。特にブラウザ（ウィンドウ幅、デバイスの機能、localStorage など）やサーバ（Node 組み込みのような）に固有の API に依存しないように注意して、また同じコードが異なる場所で実行すると異なる結果が得られるように注意してください（タイムゾーン、タイムスタンプの利用や、 URL の正規化、乱数の生成など）。詳しくは ユニバーサルなコードを書く を参照してください。

SSR とクライアントのハイドレーションを使うとき気づくべき二番目に重要なことは、不正確な HTML がブラウザによって変更される可能性があるということです。例えば、 Vue テンプレートでこのように書いたとします:

<table>
  <tr>
    <td>hi</td>
  </tr>
</table>

ブラウザは自動的に <table> の中に <tbody> を差し込みますが、 Vue が生成した仮想 DOM には <tbody> が含まれないため、不一致が発生します。正しく一致させるために、テンプレートでは正確な HTML を記述してください。

W3C Markup Validation Service (opens new window) や HTML-validate (opens new window) のような HTML バリデータを利用して、開発中のテンプレートを確認することも検討してください。