nextjs-data-fetching

name	nextjs-data-fetching
description	Implement Fetch API, Caching, and Revalidation strategies in Next.js. Use when fetching data, configuring cache behavior, or implementing revalidation in Next.js.
metadata	{"triggers":{"files":["**/*.tsx","**/service.ts"],"keywords":["fetch","revalidate","no-store","force-cache"]}}

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

• Usage Examples
• Caching Documentation

Canonical response anchors

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

• async function Page()