SSR(Server Side Rendering)は、リクエストのたびにサーバー側で HTML を組み立ててからブラウザへ返す描画方式です。ブラウザは中身が入った状態の HTMLを最初に受け取るため、表示が早く、検索エンジンにも内容が伝わりやすくなります。
まず押さえたいポイント
- リクエストごとにサーバーで HTML を生成する(=毎回最新)
- 最初の HTML に中身が入っているので、初回表示とSEOで有利
- 実行するサーバー(Node.js など)が必要で、静的配信より運用が重い
- アクセスが増えるほどサーバー負荷が上がるため、キャッシュ設計とセット
近い用語との違い
「いつ HTML を作るか」で3つに分かれます。CSR はブラウザ側で表示後に組み立て、SSR はリクエストのたびにサーバーで、SSG はビルド時にあらかじめ作ります。速さは SSG が最有利、鮮度は SSR が最有利で、その中間が ISR(一定時間ごとに静的ページを裏で作り直す)です。MPA/SPA は「ページ遷移の作り」の話なので、軸が別である点に注意します。
実務で見るポイント
「全ページSSR」にする必要はありません。Next.js や Nuxt はページ単位で方式を選べるので、更新頻度が低いページはSSG、ログイン後や在庫表示のように毎回変わるページだけSSRという使い分けが基本です。Astro のように、静的を既定にして必要な部分だけ動かす設計もあります。SSRを選ぶときはTTFB(最初のバイトが届くまでの時間)が伸びやすいため、キャッシュで補うのが定石です。
初心者がつまずきやすいのは、SSRでも「表示された=操作できる」ではない点です。サーバーが返すのはHTMLだけなので、ボタンやフォームを動かすにはブラウザ側でJavaScriptを読み込んで結びつける処理(ハイドレーション)が必要になります。見た目は早く出るのに、押しても反応しない時間帯が生まれるのはこのためで、この弱点を減らす設計として アイランドアーキテクチャ のような考え方が出てきました。