まず結論
SSG、SSR、ISR、CSRの違いは、HTMLをいつ、どこで作るかです。
| 方式 | HTMLを作るタイミング |
|---|---|
| SSG | ビルド時 |
| SSR | リクエスト時 |
| ISR | ビルド後、必要に応じて再生成 |
| CSR | ブラウザ上でJavaScriptが描画 |
名前だけ覚えるより、「いつHTMLができるのか」を見ると理解しやすくなります。
SSG
SSGはStatic Site Generationの略です。ビルド時にHTMLを作ります。
npm run build
-> index.html
-> about/index.html
向いているもの:
- ブログ
- ドキュメント
- 会社サイト
- 更新頻度が高すぎないページ
事前にHTMLがあるため、CDNで配信しやすく、表示も速くなりやすいです。
SSR
SSRはServer Side Renderingの略です。ユーザーのリクエストを受けてから、サーバがHTMLを作ります。
request
-> server
-> DB/API
-> HTML response
向いているもの:
- ログイン後のページ
- ユーザーごとに内容が変わるページ
- 常に最新データが必要なページ
- 検索条件に応じて内容が変わるページ
柔軟ですが、サーバ処理が必要なので構成はやや複雑になります。
ISR
ISRはIncremental Static Regenerationの略です。静的生成と再生成を組み合わせる考え方です。
最初は静的に配信し、一定時間後や必要なタイミングでページを再生成します。
向いているもの:
- 商品ページ
- 記事ページ
- 一覧ページ
- ある程度新しさが必要だが毎回SSRしなくてよいページ
Next.jsなどでよく聞く言葉です。
CSR
CSRはClient Side Renderingの略です。最初にHTMLの土台とJavaScriptを配り、ブラウザ側で画面を作ります。
browser
-> JS download
-> API fetch
-> render UI
向いているもの:
- 管理画面
- ダッシュボード
- 操作が多いアプリ
- ログイン後の複雑なUI
ただし、初回表示がJavaScript量に影響されやすく、SEOや初期表示の設計に注意が必要です。
比較
| 方式 | 強み | 注意点 |
|---|---|---|
| SSG | 速い、構成がシンプル | 頻繁な更新には工夫が必要 |
| SSR | 常に動的に返せる | サーバ負荷や応答速度 |
| ISR | 速さと更新性のバランス | キャッシュ設計が必要 |
| CSR | アプリ的な操作に強い | 初回JSが重くなりやすい |
選び方
まず、ページ単位で考えます。
- 会社概要: SSG
- ブログ記事: SSG
- ログイン後のマイページ: SSRまたはCSR
- 管理画面: CSR
- 商品ページ: SSG、ISR、SSRの候補
サイト全体を1つの方式に固定する必要はありません。ページごとに適した方式を選ぶのが現実的です。
実践メモ: 「どの方式が一番良いか」ではなく、「そのページは事前に作れるか、アクセス時に作る必要があるか」で考えます。
まとめ
SSGはビルド時、SSRはリクエスト時、ISRは必要に応じた再生成、CSRはブラウザ側描画です。
レンダリング方式は、表示速度、SEO、サーバ構成、更新頻度に影響します。まずはHTMLがいつ作られるかを押さえると、各フレームワークの説明も読みやすくなります。
