💎

ハイドレーションとは何か？

2022/11/27に公開

ハイドレーションとは？

SSR（サーバーサイドレンダリング）時代に、どうやって React などに書かれたイベントをフロントエンド側で DOM にアタッチするかの話です。

サーバーサイドで HTML が何かしらのデータをもとに作成されるとします
1. これは実際に HTML に埋め込まれる HTML になります
クライアントサイドに HTML をダウンロードし、 JavaScript のコードたちもダウンロードが終わり実行できる状態になったときに、Component などのコードをもとに HTML を生成し直し、参照透過性のチェックを行う
1. 参照透過性
  1. 同じ props を渡してるのに違うレンダリングがされるのはダメ
  2. 「サーバーサイドの HTML === クライアントサイドで作った HTML」となるのが期待値
サーバーサイドで生成した HTML にイベントハンドラをアタッチしていきます
このイベントハンドラの紐付けする作業を Hydration と呼称しています

サーバーサイドの DOM と、クライアントサイドの DOM を比較したときに、一致したら、サーバーサイドのほうの DOM にイベントをアタッチします。
が、不一致だった場合は、クライアントサイドの DOM を使って、 HTML を表示し、イベントをアタッチします。

どういうときに不一致になるかというと、 Math.random() を使うようなランダム要素があり、 props の値は同じなのに、それと Math.random() を使った文字列結合をして、レンダリングを行うと不一致になってしまうなどがあります。

デザイン崩れが起きる可能性がある
- 意図していないデータが紛れ込んでいるということになるため
パフォーマンスの低下、クライアントで DOM を挿入するので、オーバーヘッドがあります
- DOM を挿入処理はブラウザ側では一番重い処理
- React は仮想 DOM が重い問題はあるが、 DOM の挿入処理を最小限にしてパフォーマンスアップを図ったライブラリとして有名になった

レンダリングは DOM を作る or HTML を作る処理
- レンダリングというと何か描画をする処理のことかと思うが、フロントエンドの文脈だと HTML 文字列を作り上げる作業のことを言うことが多い
ハイドレーションは、上記で説明したとおり、イベントをアタッチする処理

ハイドレーションしない Resumable という概念が最近少しずつ話題になっています。

こちらは最近興味があるジャンルになります。

ほんの少しですが、素振り記事を書いてみました。