ハイドレーション
Hydration
サーバーで作ったHTMLに、ブラウザでJavaScriptの操作性を付け足す仕組み
簡単に説明すると
ハイドレーションは、サーバーであらかじめ作られたHTMLにJavaScriptを結びつけて、ボタン操作などの動的な機能を使えるようにする処理のことだよ。 画面が素早く表示されるのはサーバーが先にHTMLを作って送るためで、ハイドレーションはその後にブラウザ側でプログラムを結びつける別の工程なんだ。 この工程自体はJavaScriptの読み込み・実行時間がかかるけれど、サーバー側での表示と組み合わせることで動的な操作性を実現しているよ。
名前のヒミツ
英語のhydrationは「水分補給」や「水を注ぐこと」を意味する言葉だよ。 サーバーで作ったカラカラな静的HTMLに、JavaScriptという水分を注ぎ込んで動く状態にする様子から、この名前がついたんだよ。
くわしく見てみよう！
ハイドレーションとは、サーバーで作成された静的なHTMLに対して、ブラウザ側でJavaScriptの処理を結びつけて操作可能な状態にする仕組みのことだよ。
具体的には、サーバー側と同じコンポーネントをブラウザ上でも起動し、作成済みの既存DOMと対応づけてフレームワークの管理下へ引き継ぐ処理を行っているんだ。
Webサイトの表示を速くするために、サーバー側であらかじめ画面の見た目を組み立ててからブラウザへ送る手法がよく使われるんだよ。
最初に届くHTMLのままでもページ移動などのブラウザ標準の機能は動作するけれど、Reactなどが持つ高度なイベント処理や動的な機能にはまだ対応していない状態なんだね。
そこでブラウザは、初期表示の後に裏側でJavaScriptを読み込み、画面の見た目とプログラムを対応づけながらボタン操作などの機能を組み込んでいくんだよ。
この引き継ぎ処理によって、素早い初期表示とフレームワークによる動的な操作性の両立を可能にしているんだね。