Next.js のレンダリング方式まとめ｜SSG・ISR・SSR・CSR の違いと使い分け

📝Next.jsのレンダリング（生成）パターン

Next.jsの記事生成のパターンをまとめ。

レンダリング方式（SSG、SSR、ISR、CSR）のメリット・デメリット

Next.jsのレンダリング方式にはそれぞれメリットデメリットがある。

SSG、SSR、ISR、CSRそれぞれの基本挙動

📝 SSG（Static Site Generation）の基本挙動

SSG化すると、ページのビルド時にサーバーサイドで静的HTMLが生成される。
リロード時も、CDNなどを介して生成済みのHTMLがそのまま返ってくる。

export const getStaticProps = async () => {
  const data = await fetchData();// 別コンポーネントでデータを取得
  return {
    props: { data }, // ページコンポーネントに渡すprops
  };
};

📝ISR（Incremental Static Regeneration）基本挙動

SSGの派生。
Next.jsが提供する「静的生成（SSG）＋ 動的な再生成」を組み合わせた仕組み。

ページを事前にビルドしておくけど、必要に応じてあとから自動で再生成できる
→ getStaticProps に revalidate をつけることで実現。

revalidate時間を設定することで、アクセス時にバックグラウンドで静的HTMLを自動再生成できる。

export const getStaticProps = async () => {
  const data = await fetchData();
  return {
    props: { data },
    revalidate: 60, // 60秒ごとに再生成（次のアクセス時に）
  };
};

📝SSR（Server-side Rendering）の基本挙動

毎回リクエストがあるたびに、サーバー側でHTMLを生成して返す。getServerSideProps を使用。
リアルタイム性が必要なページに適している。

export const getServerSideProps = async () => {
  const res = await fetch("https://api.example.com/blogs");
  const data = await res.json();

  return {
    props: { data },
  };
};

export default function Blog({ data }) {
  return <div>{data.title}</div>;
}

📝CSR（Client-side Rendering）の基本挙動

クライアントサイド（ブラウザ）でJavaScriptがデータを取得して、DOMを描画する方式。
Next.js では useEffect でAPIから取得するなど。

import { useEffect, useState } from "react";

export default function Blog() {
  const [data, setData] = useState(null);

  useEffect(() => {
    fetch("https://api.example.com/blogs")
      .then((res) => res.json())
      .then((json) => setData(json));
  }, []);

  if (!data) return <div>Loading...</div>;

  return <div>{data.title}</div>;
}

⭐️まとめ

それぞれのレンダリング方法に、カスタマイズの柔軟さやメリットデメリットがある。
そのページの目的に合わせたレンダリング方法を選ぶと良い。