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

CSR / SSR / SSG とは?

💡 「どこで」ページを作るかの3択
📌 このページのポイント
CSR / SSR / SSG 比較 CSR ブラウザがJSを実行し HTMLを動的に生成 リクエスト毎にクライアント処理 Server JS実行 ○ リッチなUI操作 ○ ページ遷移が高速 × 初回表示が遅い × SEOに不利 例: SPA、管理画面 SSR サーバーがHTMLを レンダリングして返却 リクエスト毎にサーバー処理 HTML生成 Browser ○ SEOに有利 ○ 初回表示が速い × サーバー負荷が高い × TTFB増加 例: EC、ニュースサイト SSG ビルド時にHTMLを 事前生成しCDNに配置 ビルド時に1回だけ生成 Build CDN ○ 最速の表示速度 ○ SEO最適 × 動的コンテンツ不向き × ビルド時間 例: ブログ、ドキュメント
CSR / SSR / SSG の比較イメージ
ひよこ ひよこ

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

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

SEOにはどれがいいの?

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

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

ペンギン先生 ペンギン先生

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

ひよこ ひよこ

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

ペンギン先生 ペンギン先生

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

ペンギン
まとめ:ざっくりこれだけ覚えればOK!
「CSR/SSR/SSG」って出てきたら「Webページをどこで生成するかの3つの方式」と思えればだいたいOK!
📖 おまけ:英語の意味
「Client Side Rendering / Server Side Rendering / Static Site Generation」 = クライアント側描画 / サーバー側描画 / 静的サイト生成
💬 Rendering(描画)をどこで行うかの違い。それぞれメリット・デメリットがあるよ
← 用語集にもどる