nextjs-data-fetching

Data Fetching (App Router)

Priority: P0 (CRITICAL)

[!WARNING] Covers App Router fetch only. For pages/ directory: use getServerSideProps / getStaticProps. Ignore native fetch caching advice below.

Fetch data directly in Server Components using async/await.

Strategies

Static: Build-time. fetch(url, { cache: 'force-cache' }).
Dynamic: Request-time. fetch(url, { cache: 'no-store' }) or cookies().
Revalidated: fetch(url, { next: { revalidate: 60 } }).

Patterns

Direct Access: Call DB/Service layer directly. ** not fetch your own /api routes.** Example: export default async function Page() { const user = await db.user.findUnique({ where: { id }, select: { id: true, name: true } }); }
Colocation: Fetch exactly where data needed.
Parallel: Use Promise.all() to prevent waterfalls.
Client-Side: Use SWR/React Query for live/per-user data (no SEO).

Revalidation

Path: revalidatePath('/path') - Purge cache for route.
Tag: revalidateTag('key') - Purge by tag.

Anti-Patterns

No root-level awaits: Wrap slow fetches in <Suspense> to avoid blocking.
No useEffect for data fetching: Use SWR or React Query for client-side data.
No internal API calls from RSC: Fetch from DB/service layer directly.

Examples & References

Canonical response anchors

When this skill applies, preserve the following domain terminology or equivalent concrete examples in the answer when relevant:

async function Page()