Agent-skills-standard nextjs-data-fetching

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

install

source · Clone the upstream repo

git clone https://github.com/HoangNguyen0403/agent-skills-standard

Claude Code · Install into ~/.claude/skills/

T=$(mktemp -d) && git clone --depth=1 https://github.com/HoangNguyen0403/agent-skills-standard "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/nextjs/nextjs-data-fetching" ~/.claude/skills/hoangnguyen0403-agent-skills-standard-nextjs-data-fetching && rm -rf "$T"

manifest: skills/nextjs/nextjs-data-fetching/SKILL.md

source content

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' })

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.