【えすえすあーる】

SSR（サーバーサイドレンダリング）とは？

最終更新: 2026年10月8日

💡 サーバーでHTMLを組み立てて届けるWeb表示

WebページのHTMLをサーバー側で生成し、ブラウザへ送る描画方式。リクエストに応じて生成する使い方がある。初期HTMLに内容を含められるが、表示速度や検索順位が必ず良くなるわけではない。

📌 このページのポイント

リクエスト時にHTMLを生成する例。表示速度は生成処理や通信などによる。操作のためにJavaScriptを使う構成もある。

ひよこ

SSRはどこでページを作るの？

ペンギン先生

サーバー側でHTMLを組み立て、ブラウザへ送るよ。ブラウザがJavaScriptで内容を組み立てるCSRとは、描画する場所が違う。初期HTMLに本文を含められるので、表示や内容の読み取りを助けられるんだ。

ひよこ

必ず表示が速くなって、検索にも強くなる？

ペンギン先生

そうとは限らないよ。サーバーでのデータ取得やHTML生成に時間がかかると、応答が遅くなる。JavaScriptの実行量や通信も影響するし、SSRだけで検索順位が決まるわけではない。表示速度は実際のページで測ろう。

ひよこ

SPAとSSRはどちらかを選ぶの？

ペンギン先生

別の観点だよ。SPAはページ全体の読み直しを抑えて画面を切り替える構成で、SSRはHTMLを作る場所の話。最初はSSRでHTMLを送り、その後はブラウザで画面を更新する構成もあるんだ。

ひよこ

サーバーで作ったらJavaScriptは不要？

ペンギン先生

リンクや本文の表示だけなら不要な場合もあるけれど、Reactなどではハイドレーションで操作を有効にする構成があるよ。HTMLが見えていることと、JavaScriptが動いて操作できることは区別しよう。

ひよこ

ペンギン先生

ストリーミングSSRは、準備できたHTMLから分けて送る方法だよ。ReactではSuspenseと対応するサーバー APIを使う構成がある。SSGはビルド時にHTMLを用意する方法で、リクエストごとに生成するSSRとは生成の時点が違うんだ。

まとめ：ざっくりこれだけ覚えればOK！

「SSR」って出てきたら「サーバーでHTMLを作ってブラウザへ送る描画方式」と思えばだいたいOK！

📖 おまけ：英語の意味

「Server-Side Rendering」＝サーバー側での描画

💬 ブラウザ（クライアント）ではなくサーバーがHTMLを組み立てることからこの名前がついた

参考資料