レンダリング実装パターン (SSG / SSR / CSR)

Next.js (App Router) における3つのレンダリングパターンの実装方法をまとめました。
「いつ」「どこで」HTMLが作られるかの違いを意識しましょう。

1. SSG (Static Site Generation) デフォルト の挙動です。

ビルド時にデータを取得し、HTML を生成します。
更新頻度が低いページ（ブログ記事、ヘルプページなど）に最適です。

app/blog/page.tsxCopy
// 1. fetch でデータを取得
async function getPosts() {
  const res = await fetch('https://api.example.com/posts');
  return res.json();
}

// 2. Async Server Component として定義
export default async function BlogPage() {
  const posts = await getPosts();

  return (
    <ul>
      {posts.map((post: any) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Next.js は fetch の結果を自動的にキャッシュし、静的なページとしてビルドしようとします。

2. SSR (Server Side Rendering)

リクエストのたびにサーバーでデータを取得し、HTML を生成します。
頻繁にデータが変わるページや、ユーザーごとに内容が異なるページに最適です。

App Router で SSR にするには、fetch に cache: 'no-store' をつけるか、dynamic オプションを設定します。

方法A: fetch オプション (推奨)

Copy
async function getPosts() {
  // 毎回新しいデータを取得 (キャッシュしない)
  const res = await fetch('https://api.example.com/posts', { 
    cache: 'no-store' 
  });
  return res.json();
}

方法B: Route Segment Config

ページ全体を動的にしたい場合に使います。

app/blog/page.tsxCopy
export const dynamic = 'force-dynamic'; // 強制的に動的レンダリング

export default async function BlogPage() {
  // ...
}

3. CSR (Client Side Rendering)

ブラウザ（クライアント）で JavaScript を実行してデータを取得します。
SEO が不要な管理画面や、ユーザーインタラクションが多い部分に使います。
useEffect を使うため、 Client Component ("use client") である必要があります。

app/dashboard/page.tsxCopy
"use client"; // 必須

import { useState, useEffect } from 'react';

export default function Dashboard() {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);

  useEffect(() => {
    // ブラウザから直接APIを叩く
    fetch('https://api.example.com/user/stats')
      .then((res) => res.json())
      .then((data) => {
        setData(data);
        setLoading(false);
      });
  }, []);

  if (loading) return <div>Loading...</div>;

  return <div>ユーザー統計: {data.visits}</div>;
}

まとめ

基本は SSG (デフォルト) で作り、動的なデータが必要な場合のみ SSR や CSR を検討するのが Next.js の定石です。