SSR

概要

SSR（Server-Side Rendering）は、リクエストを受けるたびにサーバ側でHTMLを組み立てて返す方式です。ブラウザには最初から中身の詰まったHTMLが届くため、JavaScriptの実行を待たずにコンテンツが表示されます。PHPやRailsが動的にHTMLを返すのは古典的なWebの動作そのものですが、現代の文脈でSSRという言葉が使われるとき、それは主に「ReactやVueのコンポーネントをサーバでも実行してHTMLを生成する」ことを指します。

つまり現代のSSRは、SPAの開発体験（コンポーネントで宣言的にUIを書く）はそのままに、初期表示だけをサーバに肩代わりさせるハイブリッドです。Next.js（React）やNuxt（Vue）といったフレームワークがこの方式を主戦場にしています。

なぜ生まれたか

Webの歴史では、HTMLはずっとサーバで作るものでした。流れが変わったのは2010年代、SPAが主流になり、サーバは空のHTMLとJavaScriptの塊だけを返すようになってからです。開発体験と操作感は向上した一方で、2つの代償が顕在化しました。ひとつは初期表示の遅さ——JavaScriptのダウンロードと実行、さらにAPIの往復が終わるまでユーザーは白い画面を見つめることになります。もうひとつはSEOで、初期HTMLが空っぽのページは検索エンジンやSNSのプレビューにとって「中身のないページ」でした。

「サーバでHTMLを作れば解決するのは分かっている。しかしせっかくコンポーネントでUIを書いているのに、サーバ用のテンプレートを別に二重管理するのは避けたい」——この要求に応えたのが、ブラウザ用のJavaScriptコードをサーバ（Node.js）でもそのまま実行してHTML文字列を出力するという発想です。同じコンポーネントが初回はサーバで、以降はブラウザで動く。SSRはSPAを否定する回帰ではなく、SPAの弱点を埋める拡張として生まれました。

詳細

SSRの一往復とハイドレーション

現代のSSRのリクエスト処理を順に追うと、次のようになります。

鍵になるのが「ハイドレーション（hydration）」という工程です。サーバが返したHTMLは見た目こそ完成していますが、クリックしても反応しない「乾いた」状態です。ブラウザ側でJavaScriptを読み込み、既存のHTMLにイベントハンドラを結びつけて初めてインタラクティブになります。乾いたHTMLに命を吹き込むのでハイドレーション（水分補給）と呼ばれます。「表示は速いのにボタンがしばらく効かない」というSSR特有の現象は、この表示とハイドレーションの時間差から生まれます。

CSR・SSGとのタイミング比較

レンダリング方式の違いは「HTMLがいつ、どこで作られるか」で整理できます。

クライアントサイドレンダリング（CSR、純粋なSPA）は生成を全部ブラウザに任せるので初回が遅く、SSGはビルド時に作り置くので配信は最速ですが、リクエストごとに内容を変えられません。SSRはその中間で、「ユーザーごと・アクセスごとに違う内容を、それでも最初から完成したHTMLで返したい」場合の選択肢です。ログイン後のパーソナライズされたページや、在庫・価格が刻々と変わるECの商品ページが典型です。

代償: サーバの負荷と運用

SSRの代償は、リクエストのたびにサーバでコンポーネントの実行（＝CPUを使う計算）が走ることです。静的ファイルを返すだけの構成と比べ、サーバの負荷は桁違いに大きく、トラフィックが増えればスケーリングやキャッシュ戦略が必要になります。ページ全体や断片を一定時間キャッシュする、CDNのエッジでレンダリング結果を再利用するなどの工夫が定番です。また「常時稼働するNode.jsサーバが必要」という運用上の重さから、サーバレスやエッジ環境でSSRを動かすデプロイ形態も一般化しました。

フレームワークと方式のグラデーション

実務でSSRをゼロから実装することは稀で、Next.js、Nuxt、SvelteKit、Astroといったフレームワークを使うのが普通です。これらの現代的フレームワークの特徴は、SSR・SSG・CSRを「サイト単位」ではなく「ページ単位・コンポーネント単位」で混ぜられることです。トップページはビルド時に生成し、商品ページはリクエスト時にレンダリングし、カートはブラウザだけで動かす、といった適材適所が設計の中心になります。さらに、生成済みページを一定時間ごとに裏で再生成するISR、ページの一部だけをJavaScript化するアイランドアーキテクチャ、ハイドレーション自体を不要にするReact Server Componentsなど、「サーバとブラウザの分担をどこで切るか」という問いを巡って手法は今も進化し続けています。