🐥
【Next.js 16入門③】レンダリング戦略解説：CSR/SSR/SSG/ISR（最後にクイズ付き！）
メタディスクリプション
本記事は、Next.js 16 入門シリーズ第 3 回です。
Next.js におけるレンダリング戦略（CSR、SSR、SSG、ISR）と、App Router の Static/Dynamic Rendering を初学者にも分かるように整理します。実務で選択を誤らないための比較表とフロー図を掲載しています（最後にクイズ付き）。
はじめに
レンダリング戦略は「いつ・どこで HTML を生成するか」を定義します。
適切な戦略を選べば、表示速度・SEO・運用コストのバランスを最適化できます。
レンダリング戦略とは
レンダリング戦略は、使用する Router システムによって選択肢が異なります。
- Pages Router: CSR / SSR / SSG / ISR
- App Router: Static Rendering / Dynamic Rendering
Pages Router のレンダリング戦略
1. CSR（Client-Side Rendering）
- クライアント（ブラウザ）で HTML を構築する方式
- サーバー負荷が軽いが、初回ロードが重くなりやすい
2. SSR（Server-Side Rendering）
- リクエストごとにサーバーで HTML を生成
- SEO に強く、常に最新のデータを表示可能
3. SSG（Static Site Generation）
- ビルド時点で HTML を構築（内容が変わらない場合に最適）
- 最高速のレスポンスが可能
4. ISR（Incremental Static Regeneration）
- SSG の進化版（静的ページを指定間隔で再生成）
- パフォーマンスと更新性のバランスが良い
📊 Pages Router のレンダリング戦略の比較
| 戦略 | HTML 生成タイミング | 生成場所 | 特徴 | 用途例 |
|---|---|---|---|---|
| CSR | リクエスト時 | ブラウザ側 | 初回ロードが遅い、サーバー負荷軽減 | ダッシュボード、管理画面 |
| SSR | リクエストごと | サーバー側 | SEO に最適、常に最新 | E-コマース、ニュースサイト |
| SSG | ビルド時 | サーバー側（事前生成） | 最高速、静的コンテンツ | ブログ、マーケティングサイト |
| ISR | ビルド時 + 定期更新 | サーバー側（事前生成 + 再生成） | SSG + 自動更新 | 商品ページ、定期更新ブログ |
🔄 レンダリング戦略の実行フロー
CSR（Client-Side Rendering）
ユーザーリクエスト
↓
空の HTML を返す
↓
JavaScript を読み込む
↓
ブラウザで HTML を構築
↓
ページ表示完了
SSR（Server-Side Rendering）
ユーザーリクエスト
↓
サーバーで HTML を生成
↓
完全な HTML を返す
↓
ページ表示完了
SSG（Static Site Generation）
ビルド時
↓
サーバーで HTML を事前生成
↓
静的ファイルとして保存
↓
ユーザーリクエスト
↓
事前生成された HTML を返す
↓
ページ表示完了（最高速）
ISR（Incremental Static Regeneration）
ビルド時
↓
サーバーで HTML を事前生成
↓
静的ファイルとして保存
↓
ユーザーリクエスト
↓
事前生成された HTML を返す
↓
（指定時間経過後）
↓
バックグラウンドで HTML を再生成
↓
次回リクエスト時に更新された HTML を返す
App Router のレンダリング戦略
1. Static Rendering
- SSG と ISR を統合した概念
- デフォルトで静的生成を試みる（パフォーマンス最大化）
2. Dynamic Rendering
- SSR と CSR を統合した概念
- リクエストごとに動的に HTML を生成（柔軟性が高い）
まとめ
- コンテンツの性質（静的/動的、更新頻度、SEO 要件）に応じて戦略を選ぶ
- Pages Router は 4 戦略、App Router は 2 戦略で整理され、実務判断が簡潔になる
📝クイズコーナー：理解度チェック
1. Pages Router の 4 つのレンダリング戦略を説明し、各戦略の適用シーンを挙げてください。
【CSR（Client-Side Rendering）】
- 特徴: ブラウザ側で HTML を構築。初回ロードが重くなりやすいが、サーバー負荷は軽い。
- 適用シーン: 高頻度で更新される UI、ダッシュボード、管理画面、SPA。
【SSR（Server-Side Rendering）】
- 特徴: リクエストごとにサーバーで HTML を生成。初期表示が速く、SEO に強く、常に最新データを提供できる。
- 適用シーン: ニュースサイト、E コマースの一覧/詳細、ユーザーごとのページ（認証/権限が関わる）。
【SSG（Static Site Generation）】
- 特徴: ビルド時に HTML を事前生成。最速レスポンスだが、基本は静的コンテンツ向け。
- 適用シーン: ブログ、マーケティングサイト、ドキュメント、変更頻度の低い固定ページ。
【ISR（Incremental Static Regeneration）】
- 特徴: SSG + 定期再生成（指定時間後にバックグラウンドで再ビルド）。高速と更新性のバランスを両立。
- 適用シーン: 商品ページ、定期更新があるブログ/メディア、在庫や価格が時々変わる一覧。
2. App Router の Static Rendering と Dynamic Rendering の違いは？
Static Rendering はビルド/リクエスト時に静的生成を優先し、Dynamic Rendering はリクエストごとに動的生成を行います。前者はパフォーマンス重視、後者は柔軟性重視です。
🔗 参考情報
- 参考動画：
【この動画 1 本で OK】Next.js 完全攻略【2025 年最新 Version15】 - Next.js 公式ドキュメント：
Next.js Documentation
前回/次回
- Next.js 16 入門 ①:
【Next.js 16 入門 ①】フロントエンド進化と Next.js の登場（最後にクイズ付き！） - Next.js 16 入門 ②
【Next.js 16 入門 ②】Router システムとレンダリング戦略の完全解説（最後にクイズ付き！） - Next.js 16 入門 ④
【Next.js 16 入門 ④】ハイドレーション完全理解：仕組みと実例（最後にクイズ付き！） - Next.js 16 入門 ⑤
【Next.js 16入門⑤】プロジェクト作成とディレクトリ構造（最後にクイズ付き！） - Next.js 16 入門 ⑥
【Next.js 16 入門 ⑥】ページの追加とよく使うルーティング遷移方法完全解説（最後にクイズ付き！）
Discussion