サーバーでのデータ取得

なぜ学ぶか： 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)も忘れずに。