# Nextjs Data Fetching

> Fetch API, Caching, and Revalidation strategies. Use when fetching data, configuring cache behavior, or implementing revalidation in Next.js. (triggers: **/*.tsx, **/service.ts, fetch, revalidate, no-store, force-cache)

- Skill: `comeonoliver/nextjs-data-fetching` (Agent Skill)
- Install (CLI): `npx skillmds@latest add comeonoliver/nextjs-data-fetching`
- Raw SKILL.md: https://api.skillmd.com/api/skills/comeonoliver/nextjs-data-fetching/raw
- Safety review: pending (external: skill-scanner PASS, skillspector PASS)
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: ComeOnOliver (https://skillmd.com/u/comeonoliver)
- Updated: 2026-09-08
- Page: https://skillmd.com/skills/comeonoliver/nextjs-data-fetching

---


# Data Fetching (App Router)

## **Priority: P0 (CRITICAL)**

> [!WARNING]
> This skill covers **App Router** data fetching (`fetch`). If the project uses the `pages/` directory, you MUST use `getServerSideProps` or `getStaticProps` instead. Ignore this file's native `fetch` caching advice.

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. **Do 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 is 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 a 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](references/usage-examples.md)
- [Caching Documentation](https://nextjs.org/docs/app/building-your-application/caching)