12. データ取得 — サーバーでの fetch

Server Component は async 関数にでき、その中で直接 await fetch(...) と書いてデータを取得できます。取得したデータをそのまま JSX に渡せるので、useEffect やローディング状態の管理を自分で書く必要がありません。

fetch はサーバー側で実行されるため、データベースの接続情報や API キーをブラウザに見せずに使えます。ユーザーには最初からデータ入りの HTML が届くので、表示も速くなります。

経験則として、まず「サーバーで fetch して表示する」を基本形にしてください。検索ボックスの入力に応じて再取得するような場面以外は、これだけでほとんどの画面が作れます。

サンプルコード(フレームワーク環境が必要なため表示のみ)

// app/posts/page.tsx — Server Component は async にできる
type Post = { id: number; title: string };

export default async function PostsPage() {
  const res = await fetch("https://api.example.com/posts");
  const posts: Post[] = await res.json();

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

公式ドキュメントで詳しく ↗