CSR / SSR / SSGとは何ですか？

Webページのレンダリング（描画）方式の3分類。クライアント側、サーバー側、事前生成のどこで描画するかの違い。

CSR / SSR / SSGのポイントは？

CSR = Client Side Rendering（ブラウザ側で描画）。SSR = Server Side Rendering（リクエスト時にサーバー側で描画）。SSG = Static Site Generation（ビルド時に事前生成）。Next.js、Nuxt、Astroが3方式を使い分けるフレームワーク

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

CSR / SSR / SSG とは？

💡 「どこで」ページを作るかの3択

📌 このページのポイント

CSR = Client Side Rendering（ブラウザ側で描画）
SSR = Server Side Rendering（リクエスト時にサーバー側で描画）
SSG = Static Site Generation（ビルド時に事前生成）
Next.js、Nuxt、Astroが3方式を使い分けるフレームワーク

CSR / SSR / SSG の比較イメージ

ひよこ

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

ペンギン先生

CSRはブラウザがJavaScriptを実行してページを組み立てる。初回表示が遅いがページ遷移が速い。SSRはリクエストのたびにサーバーがHTMLを生成して返す。初回表示が速くSEOに強い。SSGはビルド時に全ページのHTMLを事前生成。表示が最速だが動的コンテンツに弱い。このサイトはAstro製でSSGだよ

ひよこ

SEOにはどれがいいの？

ペンギン先生

SSGが最強、SSRも良好、CSRはやや不利。GoogleのクローラーはJavaScriptを実行できるようになったけど、実行までに時間がかかるためCSRだとインデックスが遅れることがある。ECサイトやメディアサイトなどSEOが重要な場面ではSSRかSSGを選ぶのが安全だよ

ひよこ

最近のフレームワークはどう使い分けてるの？

ペンギン先生

Next.jsのApp Routerはページごとに方式を選べる。ブログ記事はSSG、商品ページはISR（Incremental Static Regeneration=定期再生成）、ダッシュボードはCSR、検索結果はSSR…と1つのアプリ内でハイブリッド構成が可能。Astroはデフォルト SSGで、必要な部分だけReactやVueの「島」をCSRで動かすIsland Architectureを採用しているよ

ひよこ

結局どれを選べばいいの？

ペンギン先生

①コンテンツがほぼ静的（ブログ、ドキュメント）→SSG、②ユーザーごとに内容が変わる（SNS、ECの商品ページ）→SSR、③ログイン後のダッシュボード→CSR。迷ったらNext.jsやAstroを使ってページ単位で選べる構成にしておくと柔軟だよ。「全部CSRでいいや」は初心者がやりがちだけど、SEOとパフォーマンスを考えると避けた方がいいね

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

「CSR/SSR/SSG」って出てきたら「Webページをどこで生成するかの3つの方式」と思えればだいたいOK！

📖 おまけ：英語の意味

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

💬 Rendering（描画）をどこで行うかの違い。それぞれメリット・デメリットがあるよ

← 用語集にもどる