サーバーでのデータ取得

なぜ学ぶか： App Routerでは「コンポーネントの中で直接await fetchする」という、Reactだけ学んだ人には奇妙に見える書き方が標準です。でもこれ、実はいちばんシンプルな形です。例を見てください。

まずはこの例を見てみましょう

// サーバーのコンポーネントは async にできる
export default async function PostsPage() {
  // コンポーネントの中で直接データを取る！
  const res = await fetch("https://api.example.com/posts");
  const posts = await res.json();

  return (
    <ul>
      {posts.map((p) => <li key={p.id}>{p.title}</li>)}
    </ul>
  );
}
// useState も useEffect も出てこない

「取って、表示する」だけ。サーバーで完成したHTMLが届くので、ちらつきもありません。

コード例

// app/posts/page.tsx — サーバーでのデータ取得（標準形）
type Post = { id: number; title: string };

export default async function PostsPage() {
  // コンポーネント内で直接 await（サーバーで実行される）
  const res = await fetch("https://api.example.com/posts");
  if (!res.ok) throw new Error("取得に失敗しました");

  const posts: Post[] = await res.json();

  return <ul>{posts.slice(0, 5).map((p) => <li key={p.id}>{p.title}</li>)}</ul>;
}

Phase 01でやったfetchの3段階（送る→確認→取り出す）がそのまま出てきています。if (!res.ok)も忘れずに。