【しーえすあーる・えすえすあーる・えすえすじー】

CSR / SSR / SSG とは？

最終更新: 2026年10月8日

💡 ページの内容を「どこで・いつ」組み立てる？

Webページの内容をどこで、いつ組み立てるかの代表的な方式。CSRはブラウザー、SSRはリクエスト時のサーバー、SSGはビルド時の事前生成を指す。

📌 このページのポイント

代表的な方式の比較。ページや部分ごとの併用もできる。

ひよこ

3つの違いを簡単に教えて？

ペンギン先生

CSRはブラウザーでJavaScriptを動かして内容を組み立てる方式だよ。SSRはリクエスト時にサーバーがHTMLを生成し、SSGはビルド時にHTMLを作っておくんだ。

ひよこ

SSGやSSRなら、ブラウザーは何もしないの？

ペンギン先生

受け取ったHTMLやCSSを使い、画面に描画するのはブラウザーだよ。さらにJavaScriptでボタンなどを動かす構成もあるんだ。HTMLを作る段階と画面に描く段階を分けて考えると分かりやすいね。

ひよこ

どの方式が一番速いの？

ペンギン先生

SSGは事前に用意したHTMLを配れるし、SSRはサーバーで内容を用意できるよ。ただ、通信、キャッシュ、JavaScriptの量、サーバーの処理にも左右されるので、方式だけで速度の順位は決まらないんだ。

ひよこ

SEOにはどう影響するの？

ペンギン先生

GoogleはJavaScriptを実行して内容を読み取れるけれど、すべてのクローラーがそうとは限らないよ。HTMLに内容を含めるSSRやSSGは取得を助けるけれど、検索順位そのものを保証する方式ではないんだ。

ひよこ

使い分けの目安はある？

ペンギン先生

更新時に生成し直せる記事ならSSG、リクエストごとに内容を作りたいページならSSR、利用者の操作に応じて画面を組み立てたい部分ならCSRが候補になるよ。Astroのように、静的生成と必要なページのSSRを併用できる仕組みもあるんだ。

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

「CSR / SSR / SSG」って出てきたら「ページの内容をどこで・いつ組み立てるかの方式」と思えばだいたいOK！

📖 おまけ：英語の意味

「Client Side Rendering / Server Side Rendering / Static Site Generation」＝クライアント側描画 / サーバー側描画 / 静的サイト生成

💬 CSRとSSRは主に組み立てる場所、SSGは事前に生成するタイミングを表すよ。画面への最終的な描画は、どの方式でもブラウザーが行うんだ。

参考資料