Skillshub 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)

install

source · Clone the upstream repo

git clone https://github.com/ComeOnOliver/skillshub

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

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

manifest: skills/HoangNguyen0403/agent-skills-standard/nextjs-data-fetching/SKILL.md

source content

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

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.