⌛

一瞬で理解するHydration

2024/06/16に公開

はじめに

この記事の内容は、以下の動画でも解説しているので是非見てみてください！（動画の方が多分わかりやすいです！）

Hydration（ハイドレーション）とは、直訳すると「水分補給」という意味です。
フロントエンドの世界では、静的な HTML に JavaScript を結び付けてインタラクティブにするプロセスのことを指します。

例えば、React で SSR する場合を考えてみましょう。

SSR では、まずブラウザはサーバーに対して、リクエストを送信します。リクエストを受けたサーバーは、JavaScript を実行して、HTML を作り出します。そして、完成したこの HTML をブラウザに送り返します。

このとき重要なのは、受け取った HTML が "あくまでも見た目しかない" ということです。つまり、このままだと Web ページは静的で、クリックしても何も起きません。

そこで必要になるのが「Hydration」です。

Hydration とは、先ほど述べたとおり水分補給という意味で、まるで乾いた HTML に、インタラクティブ性という「水」を与えるようなものです。

つまり、先ほどの SSR の例で言うと、HTML を表示した後に、JavaScript をダウンロードして実行するという、このプロセスのことを Hydration と呼びます。

このように、Hydration を行うことで、静的な HTML をインタラクティブな Web ページに変えることが可能になります。

この記事の他にも、「100秒で理解する」というシリーズを書いています。