**SSR / CSR / SSG / ISR** のレンダリング方式についてまとめてみた

1. SSR (Server-Side Rendering)

概要

• リクエストごとにサーバーで HTML を生成して返す方式。
• ユーザーがページを開くたびにサーバーが最新データを取得して HTML を作る。

Next.js の例

export async function getServerSideProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}

メリット

• 常に最新データを表示できる。
• SEO に強い（初回から完成した HTML が返る）。
• ユーザーのリクエストに応じたパーソナライズが可能。

デメリット

• 毎回サーバー計算が必要 → 表示が遅くなりやすい。
• サーバー負荷が高くなる。
• サーバーが落ちるとページも表示できない。

向いている場面

• データが頻繁に変わるページ（例：株価、天気予報、ダッシュボード）。

---

2. CSR (Client-Side Rendering)

概要

• サーバーからは HTML の「骨組み」だけを返し、JavaScript でブラウザ側がデータを取得して描画。
• React SPA（シングルページアプリ）と同じ方式。

Next.js の例

export default function Page() {
  const [data, setData] = useState(null);
  useEffect(() => {
    fetch("/api/data")
      .then(res => res.json())
      .then(setData);
  }, []);
  return <div>{data ? data.title : "Loading..."}</div>;
}

メリット

• サーバー負荷が軽い。
• ページ遷移が高速（SPA 的な動作）。
• API と直接通信する柔軟なUIが作れる。

デメリット

• 初回表示が遅い（JavaScript 読み込みまで真っ白）。
• SEO に弱い（クローラーがJSを実行しない場合、空のHTMLを読む）。

向いている場面

• ログイン後のユーザーダッシュボード。
• SEO 不要なアプリ（管理画面、社内ツールなど）。

---

3. SSG (Static Site Generation)

概要

• ビルド時に HTML を生成し、CDN から配信する。
• 実際のアクセス時にはサーバーでの計算が不要。

Next.js の例

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return { props: { data } };
}

メリット

• 超高速（CDN配信）。
• サーバー不要（ホスティングコスト低）。
• SEO に強い。

デメリット

• ビルド時のデータが古くなる可能性あり。
• 頻繁に変わるデータには不向き。

向いている場面

• ブログ、ドキュメント、会社サイトなど更新頻度が低いページ。

---

4. ISR (Incremental Static Regeneration)

概要

• 基本は SSG と同じだが、指定時間ごとに再生成できる。
• 再生成はバックグラウンドで行われるため、古いページもすぐに表示される。

Next.js の例

export async function getStaticProps() {
  const res = await fetch("https://api.example.com/data");
  const data = await res.json();
  return {
    props: { data },
    revalidate: 60, // 60秒ごとにバックグラウンド再生成
  };
}

メリット

• SSG の高速性 + データの自動更新。
• サーバー負荷が低い。

デメリット

• 更新のタイミングで一時的に古いデータが表示される。
• 複雑なパーソナライズには不向き。

向いている場面

• 更新は頻繁だが「1分程度の遅延」が許されるニュースサイトや商品一覧。

---

比較表

特徴	SSR	CSR	SSG	ISR
初期表示速度	中〜遅	遅	速	速
SEO	強い	弱い	強い	強い
常に最新データ	◎	△	✕	△
サーバー負荷	高	低	なし	低
実装難易度	中	易	中	中
向いてる用途	最新性重視	ログイン後UI	静的サイト	高速 & 適度な更新