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

ハイドレートとは?

Webアプリケーションフレームワークの機能の一つで、サーバ側で生成した静的なWebページにクライアント側でスクリプトを組み込み、利用者が操作可能な状態に合成する処理のこと。
ハイドレートのイメージ画像

Webアプリケーションフレームワークでは、サーバ側とクライアント側が連携してWebサイトを構築する手法がいくつか存在し、そのうちの一つに「サーバサイドレンダリング」(SSRServer-Side Rendering)がある。SSRでは、本来クライアント側で生成されるHTMLサーバ側で先に組み立て、完成した状態でWebブラウザへ送信する。

この方式では、ブラウザスクリプトの読み込みや実行を待たずに画面の表示を開始できるため、利用者が内容を確認できるまでの時間が短縮される。検索エンジンの巡回プログラムクローラー)もJavaScriptの実行なしにページの内容を読み取れるため、検索エンジン最適化(SEO)の観点からも好まれる。

ただし、この時点のHTMLは見た目こそ完成しているものの、ボタンを押しても反応しないなど、操作に応答する仕組みを備えていない。そこで、ブラウザバックグラウンドで対応するJavaScriptを読み込み、DOMの構造を解析したうえで、ボタンやフォームなどの要素ごとにイベントハンドラを割り当て、アプリケーションとしての内部状態を与える。

この処理をハイドレートと呼び、静的だったページに動的な機能が組み込まれ、クリックや入力といった利用者の操作に反応するアプリケーションとして機能するようになる。「スタティックサイトジェネレーション」(SSG)方式でサイト単位で事前に一括生成されたHTMLに対しても、同様の処理が適用される場合がある。

ハイドレートが完了するまでの間は画面が表示されていても操作を受け付けない時間が生じるため、処理能力の低い端末や通信環境が悪い状況では、利用者が操作できないストレスを感じることがある。この課題に対応するため、ページ全体を一括で処理せず、必要な部分だけを段階的に処理する「パーシャルハイドレーション」(partial hydration)や「プログレッシブハイドレーション」(progressive hydration)といった技術も導入されている。ReactVueなどの主要なフレームワークでは、こうした仕組みを前提に静的生成とクライアント側の動的処理を組み合わせる設計が一般化である。

(2026.6.26更新)

他の辞典等による「ハイドレート」の解説 (外部サイト)

この記事の著者 : (株)インセプト IT用語辞典 e-Words 編集部
1997年8月より「IT用語辞典 e-Words」を執筆・編集しています。累計公開記事数は1万ページ以上、累計サイト訪問者数は1億人以上です。学術論文や官公庁の資料などへも多数の記事が引用・参照されています。