SSR（サーバー描画）とハイドレーション
📖 このページのゴール：SSR＝サーバーサイドレンダリング——「サーバーでHTMLを作って返す」やり方を、たとえで腹落ちさせます。前ページの SPA（ブラウザで全部描く）との違いを「最初に誰がHTMLを作るか」で見分けられるようになり、おまけの主役 ハイドレーション もスッキリ理解しましょう。 ← 目次・はじめにへもどる
🍳 たとえ：厨房で作って、皿で出す
前ページの SPA はこうでした。
🍳 SPA＝材料(JS)を送って、客が自分で調理する。 席に着いてから材料が届き、自分でフライパンを振る。最初は待つけれど、いちど作れば以後はサクサク。
SSR はこれをひっくり返します。
🍳 SSR＝厨房で料理を作って、皿に盛って出す。 席に着いたら、もうできあがった料理が目の前に出てくる。すぐ食べられるのが最大のよさ。
つまり SSR は、画面の組み立て（レンダリング）を“客（ブラウザ）”ではなく“厨房（サーバー）”が先にやってくれるやり方です。
🟢 レンダリング＝画面を組み立てて表示すること。 SPA はそれをブラウザでやり、SSR はサーバーでやる——ここがいちばんの分かれ目です。
🧩 しくみ：どこで・何が起きるか
SSR（Server Side Rendering ＝サーバーサイドレンダリング）の流れを、時間順に追ってみます。
① ブラウザ：ページを開きにいく（URLにアクセス）
│
▼
② サーバー：その場でHTMLを“組み立てて”返す
（中身が詰まった、完成形のHTML）
│
▼
③ ブラウザ：受け取ったHTMLを すぐ表示！ ← もう読める／見える 👀
│
▼
④ あとから JS が届く → 💧ハイドレーション
（静的なHTMLに JS をかぶせて “動く” ようにする）
│
▼
⑤ 完成：ボタンもフォームも反応する “生きた” ページに
ポイントは ② で「中身の詰まったHTML」が返ってくること。SPA が返すのは「ほぼ空のHTML＋JSの束」でしたが、SSR は最初から見える状態のHTMLを返します。だから ③ ですぐ表示できるのです。
💧 ハイドレーション＝乾物に水を戻す
ただし、② で返ってきたHTMLは“見た目だけ”。写真のようなもので、ボタンを押してもまだ反応しません。そこで ④ の出番です。
💧 ハイドレーション＝乾物に水を戻す。 サーバーが作った“見た目だけのHTML（＝乾物）”に、ブラウザでJS（＝水）をかけると、ボタンやフォームが反応する“動くページ（＝もどった食材）”になります。
「ハイドレーション（hydration）」は英語で「水分を与えること」。干ししいたけを水で戻すイメージそのままです。表示はサーバー製HTMLで一瞬、操作はあとからJSで追いつく——この二段構えが SSR の正体です。
🔁 SPA（CSR）との違い ＝「最初に誰がHTMLを作るか」
前ページの SPA（CSR＝クライアントサイドレンダリング）と、役割分担で並べてみます。
| SPA（CSR） 🧑🍳客が調理 | SSR 🍳厨房で調理 | |
|---|---|---|
| 最初にHTMLを作る人 | ブラウザ（届いたJSが組み立てる） | サーバー（先に組み立てて返す） |
| サーバーが返すもの | ほぼ空のHTML＋JSの束 | 中身が詰まった完成HTML |
| 初回表示 | 重め（JSを落として実行してから） | 速い（届いた瞬間に見える） |
| SEO（検索エンジン対応） | 弱め（昔ほどではない） | 強い（最初から中身が見える） |
| サーバー | 軽くてよい（置くだけ） | 必要（毎回その場で組み立てる） |
| 操作のサクサク感 | いちど起動すれば◎ | ハイドレーション後は◎ |
🟢 迷ったらこの一言：「最初の完成HTMLを、ブラウザが作る＝SPA／サーバーが作る＝SSR」。これさえ言えれば違いは押さえたも同然です。
👍 SSR が向いていること
- 🔎 初回表示が速い … 厨房で作って出すので、開いた瞬間に中身が見える。「最初の1秒」が勝負のサイトに効く。
- 🔎 SEOに強い … 検索エンジンのロボットに最初から中身の入ったHTMLを見せられる。検索流入が大事なサイトの定番。
- 🔒 秘密をサーバー側で扱える … APIキーやDBアクセスをサーバーの中で処理してから、結果のHTMLだけ返せる。鍵をフロントに出さずに済む（横断の鉄則とも地続き）。
- 🌐 公開Webアプリ・EC・メディア向き … 「誰でも見る・検索から来る・最初の表示が速いほどよい」ページにぴったり。
🔒 復習：SPAでもAPIキー・秘密はフロントに出さないのが鉄則。SSR は「サーバー側で秘密を扱える」ぶん、ここが構造的にラクになります。
👎 SSR が向かない・注意したいこと
- 💰 サーバーが要る＝コストと手間 … 「皿に盛って出す厨房」が常に必要。置くだけで済む SPA より運用が重く・複雑になりがち。
- 💧 ハイドレーションのズレ問題 … サーバーが作ったHTMLと、ブラウザのJSが想定するHTMLが食い違うと、表示が崩れたり警告が出たりする（”hydration mismatch”）。初心者がハマりやすい定番のつまずき。
- ⏱️ TTFB はサーバー処理しだい … TTFB＝Time To First Byte（最初の1バイトが届くまでの時間）。SSR は毎回サーバーで組み立てるので、サーバーが遅い／混むと、最初の表示まで逆に待たされることも。「作り置き」で先回りする次ページの SSG とは、ここが対照的。
🔧 応用メモ（読み飛ばしOK）： ②で返したHTMLと④のJSが噛み合わないと起きるのがハイドレーションのズレ。「サーバーとブラウザで同じ結果になるよう書く」のがコツ、とだけ覚えておけば十分です。
🏢 代表ツール
「SSRをやってくれるフレームワーク」は、たいてい React や Vue の上に乗った“メタフレームワーク”として提供されます（詳しくは第9章）。
| ツール | 土台 | ひとこと |
|---|---|---|
| Next.js | React | SSR の超定番。ハイブリッドも得意（9章で詳述） |
| Nuxt | Vue | Vue 版の定番。Next.js に対応する立ち位置 |
🟢 まずは名前だけでOK：React なら Next.js、Vue なら Nuxt。「SSRしたい＝この2つのどちらか」と覚えておけば、最初は迷いません。
🗒️ ことばメモ
| ことば | よみ／英語 | やさしい言い換え |
|---|---|---|
| SSR | エスエスアール／Server Side Rendering | サーバーでHTMLを作って返すやり方 |
| レンダリング | — | 画面を組み立てて表示すること |
| ハイドレーション | hydration（＝水を与える） | 💧 静的HTMLにJSをかぶせて“動く”ようにする |
| TTFB | ティーティーエフビー／Time To First Byte | 最初の1バイトが届くまでの時間。サーバーが遅いと延びる |
| SEO | エスイーオー／Search Engine Optimization | 検索で見つけてもらいやすくすること |
🟢 ひとことで言うと
SSR＝厨房で作って皿で出す。 サーバーがHTMLを組み立てて返すので初回表示が速く・SEOに強く・秘密もサーバー側で扱える——公開Webアプリ／EC／メディア向き。届いたあとに 💧 ハイドレーション（静的HTMLにJSをかぶせる）で“動く”化します。代わりにサーバーが要る（コスト・複雑さ）／ズレ問題／TTFB依存には注意。