App Routerではどのようにしてデータをフェッチしますか？

Question

Accepted Answer

App Routerでは、標準的な`fetch` APIを使って**非同期Server Components内で直接データをフェッチ**します — `getServerSideProps`なし、`useEffect`なし、別々のデータレイヤーなし。Next.jsは`fetch`をキャッシュコントロール機能で拡張しています。 ## 基本的なパターン ```tsx // app/posts/page.tsx — a Server Component export default async function Posts() { const res = await fetch("https://api.example.com/posts"); // runs on the server const posts = await res.json(); return

{p.title}

; } ``` コンポーネントはサーバー上で実行されるため、データを単に`await`して使用するだけです — クライアント側の`useEffect` + `useState` + ローディング状態の複雑なやり取りよりもはるかに簡単です。 ## キャッシング戦略はフェッチごとに設定される Next.jsは`fetch`を拡張し、各呼び出しが独自のレンダリング動作を選択できるようにします： ```tsx fetch(url, { cache: "force-cache" }); // SSG — cached (default for static) fetch(url, { cache: "no-store" }); // SSR — fresh every request fetch(url, { next: { revalidate: 60 } }); // ISR — revalidate every 60s fetch(url, { next: { tags: ["posts"] } }); // tag for on-demand revalidation ``` これはApp Routerの統合されたモデルです。ページレベルの戦略を選択するのではなく、データフェッチレベルでキャッシングを制御します。 ## 並列フェッチでウォーターフォールを回避 ```tsx // ❌ sequential — each awaits the previous (slow waterfall) const user = await getUser(); const posts = await getPosts(); // ✅ parallel — both start at once const [user, posts] = await Promise.all([getUser(), getPosts()]); ``` `Promise.all`で独立したリクエストを一緒に開始すれば、それらが互いをブロックしません。 ## Client Componentsでのフェッチ ```tsx "use client"; // for client-side data (e.g. after interaction), use a library like SWR or React Query const { data } = useSWR("/api/user", fetcher); ``` Server Componentsはほとんどのニーズをカバーします。クライアント側、対話的、または頻繁に再検証が必要なデータの場合はSWR/React Queryを使用してください。 ## リクエストの重複排除 Next.jsは単一のレンダー内で同一の`fetch`呼び出しを自動的に**重複排除**します — そのためレイアウトとページで同じデータをフェッチしても二重リクエストにはなりません。 ## なぜ重要なのか Server Components内での直接的な非同期データフェッチはApp Routerの最大の簡素化の1つです — ボイラープレートなし、サーバー側の安全なアクセス、自動重複排除、そしてSSG/SSR/ISRの選択肢となるフェッチごとのキャッシング。独立したフェッチを並列化する方法を知ること（ウォーターフォールを回避する）がパフォーマンスの鍵です。