ハイドレート【hydrate】ハイドレーション/hydration
ハイドレートとは?

Webアプリケーションフレームワークでは、サーバ側とクライアント側が連携してWebサイトを構築する手法がいくつか存在し、そのうちの一つに「サーバサイドレンダリング」(SSR:Server-Side Rendering)がある。SSRでは、本来クライアント側で生成されるHTMLをサーバ側で先に組み立て、完成した状態でWebブラウザへ送信する。
この方式では、ブラウザはスクリプトの読み込みや実行を待たずに画面の表示を開始できるため、利用者が内容を確認できるまでの時間が短縮される。検索エンジンの巡回プログラム(クローラー)もJavaScriptの実行なしにページの内容を読み取れるため、検索エンジン最適化(SEO)の観点からも好まれる。
ただし、この時点のHTMLは見た目こそ完成しているものの、ボタンを押しても反応しないなど、操作に応答する仕組みを備えていない。そこで、ブラウザはバックグラウンドで対応するJavaScriptを読み込み、DOMの構造を解析したうえで、ボタンやフォームなどの要素ごとにイベントハンドラを割り当て、アプリケーションとしての内部状態を与える。
この処理をハイドレートと呼び、静的だったページに動的な機能が組み込まれ、クリックや入力といった利用者の操作に反応するアプリケーションとして機能するようになる。「スタティックサイトジェネレーション」(SSG)方式でサイト単位で事前に一括生成されたHTMLに対しても、同様の処理が適用される場合がある。
ハイドレートが完了するまでの間は画面が表示されていても操作を受け付けない時間が生じるため、処理能力の低い端末や通信環境が悪い状況では、利用者が操作できないストレスを感じることがある。この課題に対応するため、ページ全体を一括で処理せず、必要な部分だけを段階的に処理する「パーシャルハイドレーション」(partial hydration)や「プログレッシブハイドレーション」(progressive hydration)といった技術も導入されている。ReactやVueなどの主要なフレームワークでは、こうした仕組みを前提に静的生成とクライアント側の動的処理を組み合わせる設計が一般化である。