| 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
