ハイドレーション

📖 もうちょい詳しく

何が新しいの？

昔のサイトは、サーバーが完成したページ（HTML）を作って返すだけのものが多くありました。その後、ブラウザの中でJavaScriptがすべてを組み立てる作り方（SPAと呼ばれます）が広がります。でもそれだと、最初の表示が遅くなったり、検索エンジンに中身が伝わりにくかったりする弱点が出てきました。そこで「最初はサーバーが描いて、あとからJavaScriptを足す」という良いとこ取りの仕組みが必要になり、その差し込み作業がハイドレーションです。

どうやって動いてるの？

まずサーバーが、見た目だけは完成したHTMLをブラウザに返します。この時点では画面は出ていますが、ボタンを押しても反応しません。続いてブラウザがJavaScriptを読み込み、すでに表示されている要素を上からたどって「ここはこのボタン」「ここはこの部品」と結びつけていきます。この結びつけが終わると、クリックや入力に反応できる状態になります。

何ができるの？

最初の表示が速くなり、読み込み中の「真っ白な画面」を減らせます。さらにサーバーが中身入りのHTMLを返すので、検索エンジンにもページの内容が伝わりやすくなります。ReactやNext.jsなどのツールを使うと、この流れがほぼ自動で行われます。

🌱 身近なたとえ

組み立て前の家具で例えると分かりやすいです。お店から届いた時点で、見た目は完成形に近い形（HTML）になっています。ただ、引き出しはまだ開きません。そこに付属のネジ（JavaScript）を、決められた場所へ順番に差し込んでいくと、引き出しが動くようになります。この「ネジを差し込んで動くようにする作業」がハイドレーションにあたります。

✅ まず覚えるポイント

• サーバーが先に描いたHTMLに、後からJavaScriptを足す処理です。
• 見た目を作り直すのではなく、既存の要素に動きを結びつけます。
• 最初の表示が速く、検索エンジンにも内容が伝わりやすくなります。
• 終わるまではボタンなどがまだ反応しないことがあります。
• ReactやNext.jsなどでよく使われる仕組みです。

🧭 よくある勘違い

ハイドレーションは画面をもう一度描き直しているの？

基本は描き直しではありません。サーバーが返したHTMLをそのまま使い、そこに動きの部分だけを後付けします。もしサーバー側とブラウザ側で中身が食い違っていると、警告が出たり描き直しが起きたりするので、両者をそろえることが大切です。

ハイドレーションが終わる前でも操作できるの？

見た目は出ていても、結びつけが終わるまではクリックや入力に反応しないことがあります。この「見えているのにまだ押せない」時間を短くする工夫が、近年の表示速度の話題でよく取り上げられます。

🧩 関連して覚えると楽な言葉

• SSR: サーバー側でHTMLを先に作って返す方式のことです。
• 仮想DOM: 画面構造をメモリ上に写し取り差分だけ反映する仕組み。ハイドレーションで結びつける対象です。
• React: 画面を部品ごとに作るためのJavaScriptの道具です。
• SPA: 1つのページを切り替えながら使うアプリ型のサイトのことです。

🏁 ひとことでまとめ

見た目だけのHTMLに動きを後から差し込んで、ちゃんと操作できるページに仕上げる作業です。