データ取得パターン

// ── Server Component でのデータ取得（推奨）──────────────
// async/await をコンポーネント内で直接使える（サーバー側のみ）
async function ProductPage({ params }: { params: { id: string } }) {
  // fetch: Next.js が自動でキャッシュ管理する
  const product = await fetch('/api/products/' + params.id, {
    next: { revalidate: 60 }, // 60秒ごとに再取得
  }).then(r => r.json());

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

// ── Client Component でのデータ取得 ──────────────────
// 'use client' が必要 → ブラウザ側で実行される
'use client';
import { useState, useEffect } from 'react';

function ClientProduct({ id }: { id: string }) {
  const [product, setProduct] = useState(null);

  useEffect(() => {
    fetch('/api/products/' + id)
      .then(r => r.json())
      .then(setProduct);
  }, [id]);

  if (!product) return <p>読み込み中...</p>;
  return <p>{product.name}</p>;
}