第6章: レンダリング戦略の使い分け — SSR, SSG, Streaming, PPR

// app/blog/[slug]/page.tsx — SSGの実装
// generateStaticParamsで全ページのパラメータを事前生成
export async function generateStaticParams() {
  const posts = await fetch('https://cms.example.com/posts')
    .then(r => r.json());

  return posts.map((post: { slug: string }) => ({
    slug: post.slug,
  }));
}

// ビルド時に各slugに対してこの関数が実行される
export default async function BlogPost(
  { params }: { params: Promise<{ slug: string }> }
) {
  const { slug } = await params;
  const post = await fetch(
    'https://cms.example.com/posts/' + slug
  ).then(r => r.json());

  return (
    <article>
      <h1>{post.title}</h1>
      <time>{post.publishedAt}</time>
      <p>{post.body}</p>
    </article>
  );
}

// dynamicParams = false にすると、generateStaticParamsに含まれないパスは404を返す
export const dynamicParams = false;

// app/dashboard/page.tsx — SSRの実装（動的API使用で自動判定）
import { cookies } from 'next/headers';

export default async function Dashboard() {
  // cookies()を使用 → 自動的にSSR（リクエスト時レンダリング）
  const cookieStore = await cookies();
  const token = cookieStore.get('auth-token')?.value;

  const data = await fetch('https://api.example.com/dashboard', {
    headers: { Authorization: 'Bearer ' + token },
  }).then(r => r.json());

  return (
    <div>
      <h1>{data.userName}のダッシュボード</h1>
      <p>最終ログイン: {data.lastLogin}</p>
    </div>
  );
}

// 明示的にSSRを強制する方法
// export const dynamic = 'force-dynamic';

// 方法1: Route Segment ConfigによるISR
export const revalidate = 3600; // 1時間ごとに再検証

// 方法2: 'use cache' + cacheLife()による同等の制御
import { cacheLife } from 'next/cache';

export default async function ProductPage(
  { params }: { params: Promise<{ id: string }> }
) {
  'use cache';
  cacheLife('hours'); // stale: 5分, revalidate: 1時間, expire: 1日

  const { id } = await params;
  const product = await fetch(
    'https://api.example.com/products/' + id
  ).then(r => r.json());

  return (
    <div>
      <h1>{product.name}</h1>
      <p>{product.price}円</p>
    </div>
  );
}

// app/dashboard/page.tsx — Streamingの実装
import { Suspense } from 'react';

export default function DashboardPage() {
  return (
    <div>
      <h1>ダッシュボード</h1>

      {/* ナビゲーション: 即座に表示 */}
      <nav>...</nav>

      {/* 売上データ: 取得に2秒かかる → Suspenseで段階的配信 */}
      <Suspense fallback={<SalesSkeleton />}>
        <SalesChart />
      </Suspense>

      {/* ユーザー一覧: 取得に3秒かかる → 別のSuspense境界 */}
      <Suspense fallback={<UserListSkeleton />}>
        <RecentUsers />
      </Suspense>
    </div>
  );
}

// 各コンポーネントはServer Componentとして独立してデータを取得
async function SalesChart() {
  const sales = await fetch('https://api.example.com/sales')
    .then(r => r.json());
  return <div>{/* チャート描画 */}</div>;
}

async function RecentUsers() {
  const users = await fetch('https://api.example.com/users')
    .then(r => r.json());
  return <ul>{/* ユーザー一覧 */}</ul>;
}

// next.config.ts — PPRの有効化
const nextConfig = {
  experimental: {
    ppr: 'incremental', // ルートごとに段階的に有効化
  },
};
export default nextConfig;

// app/product/[id]/page.tsx — PPRの実装
import { Suspense } from 'react';

// このルートでPPRを有効化
export const experimental_ppr = true;

export default function ProductPage(
  { params }: { params: Promise<{ id: string }> }
) {
  return (
    <div>
      {/* 静的シェル: ビルド時に生成、CDNキャッシュ */}
      <header>
        <h1>商品詳細</h1>
        <nav>...</nav>
      </header>

      {/* 動的部分: Suspense境界内がリクエスト時にストリーミング */}
      <Suspense fallback={<PriceSkeleton />}>
        <DynamicPrice params={params} />
      </Suspense>

      <Suspense fallback={<RecommendationSkeleton />}>
        <PersonalizedRecommendations />
      </Suspense>

      {/* 静的部分: 商品説明、レビュー（ビルド時生成） */}
      <section>
        <h2>商品説明</h2>
        <p>...</p>
      </section>
    </div>
  );
}

// 1つのページ内で3つのレンダリングモデルが共存
import { Suspense } from 'react';
import { cacheLife, cacheTag } from 'next/cache';

export const experimental_ppr = true;

// Static: ビルド時に確定するヘッダー
function SiteHeader() {
  return <header><h1>My Store</h1></header>;
}

// Cached: 1時間ごとに再検証される商品データ
async function ProductInfo({ id }: { id: string }) {
  'use cache';
  cacheLife('hours');
  cacheTag('product-' + id);

  const product = await fetch(
    'https://api.example.com/products/' + id
  ).then(r => r.json());
  return <div><h2>{product.name}</h2></div>;
}

// Dynamic: リクエスト時にユーザーごとに生成
async function Recommendations() {
  const { cookies } = await import('next/headers');
  const cookieStore = await cookies();
  const userId = cookieStore.get('user-id')?.value;

  const recs = await fetch(
    'https://api.example.com/recommendations?user=' + userId
  ).then(r => r.json());
  return <ul>{/* レコメンド表示 */}</ul>;
}

// ページ: Static + Cached + Dynamic の混合
export default function ProductPage(
  { params }: { params: Promise<{ id: string }> }
) {
  return (
    <div>
      <SiteHeader />
      <Suspense fallback={<div>読み込み中...</div>}>
        <ProductInfo id={params.then(p => p.id)} />
      </Suspense>
      <Suspense fallback={<div>おすすめ読み込み中...</div>}>
        <Recommendations />
      </Suspense>
    </div>
  );
}