はじめに
Web フロントエンドの世界では、ページの描画方法として「CSR」「SSR」「SSG」という大きく分けて3つの戦略があります。
それぞれの仕組みや使いどころを整理してみました。
🧩 各レンダリング方式の概要
| 略称 | 正式名 | 実行タイミング | HTML生成場所 | 特徴 |
|---|---|---|---|---|
| CSR | Client Side Rendering | ブラウザ上で実行時に描画 | クライアント | SPAに最適・API取得もクライアントで行う |
| SSR | Server Side Rendering | リクエストごと | サーバー | 毎回最新のHTMLを返す・柔軟性あり |
| SSG | Static Site Generation | ビルド時のみ | サーバー（ビルド環境） | 一度だけHTML生成・超高速配信が可能 |
🖥 CSR（Client Side Rendering）
特徴
- HTML には最低限の構造のみが含まれており、JavaScript が実行されて初めて画面が描画される。
- すべての処理がクライアント（ブラウザ）で行われる。
メリット
- 初期表示後のページ遷移が非常に高速
- インタラクティブ（＝操作に即座に反応）」で「動的（＝状態が変わる）な UI に強い
<向いている機能>- 簡易的なTODOリスト（サーバーを介さないので、即座にリストに追加されるなど）
- モーダルの表示・非表示
- カレンダーで日付を選んで予定を追加
デメリット
- 初回表示が遅い（HTML がすぐ見えない）
- SEO に弱い（検索エンジンが JS 実行しないと中身が見えないことがある）
🌐 SSR（Server Side Rendering）
特徴
- ユーザーがページにアクセスするたびに、サーバー上で HTML を生成して返す。
- React コンポーネントがサーバー側で毎回実行される。
メリット
- ページの初期表示が速い（HTML がすぐ届く）
- SEO 対策に強い
- ユーザーごとの動的ページに最適
デメリット
- リクエストごとにサーバー処理が必要なので、スケーラビリティを考慮する必要がある
- サーバーへの負荷が大きくなる可能性がある
⚡️ SSG（Static Site Generation）
特徴
-
next build時に React コンポーネントを実行し、HTML を静的に生成しておく(Next.jsでの話) - ビルド後は CDN に配信され、リクエストごとの処理は不要
メリット
- 表示が爆速（CDN キャッシュで提供）
- サーバーレスでスケーラブル
デメリット
- コンテンツが古くなる可能性がある
- データ更新には再ビルドが必要(ISRというNext.jsの一定時間ごとに自動で部分的に再ビルドする機能で解決できることもある )
🧪 比較表まとめ
| 項目 | CSR | SSR | SSG |
|---|---|---|---|
| 初期表示速度 | 遅い | 速い | 爆速 |
| SEO 対応 | 弱い | 強い | 強い |
| リアルタイム性 | 強い | 強い | 弱い（再ビルド必要） |
| スケーラビリティ | 高い | 低い | 高い |
| インフラコスト | 低い | 中〜高 | 低い |
💬 補足：ISR（Incremental Static Regeneration）とは？
Next.js 独自の機能で、SSG に「再生成」の柔軟性を追加したものです。
一定時間ごとに自動で静的HTMLを再生成したり、APIからの指示で再ビルドをトリガーできてりします。
🚀 まとめ
フロント技術のキャッチアップをする中でざっくりとですが、概念や用途を整理してみました！
間違いがあれば、教えて頂けると幸いです。
Next.js やモダンWebアプリケーションでは、用途に応じて CSR / SSR / SSG / ISR を適切に選ぶことがとても重要です。
チームやプロジェクトの要件に応じて、最適なレンダリング方式を選びましょう！