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

fetch
$curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-data-fetching?format=md"
SKILL.md•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.
  • 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 Awaits: Avoid blocking the entire page. Use <Suspense>.
  • No useEffect: Avoid manual fetching in client effects.
  • Internal API: Never call /api/... from Server Components.

Examples & References

> related_skills --same-repo

> typescript-tooling

Development tools, linting, and build config for TypeScript. Use when configuring ESLint, Prettier, Jest, Vitest, tsconfig, or any TS build tooling. (triggers: tsconfig.json, .eslintrc.*, jest.config.*, package.json, eslint, prettier, jest, vitest, build, compile, lint)

> typescript-security

Secure coding practices for TypeScript. Use when validating input, handling auth tokens, sanitizing data, or managing secrets and sensitive configuration. (triggers: **/*.ts, **/*.tsx, validate, sanitize, xss, injection, auth, password, secret, token)

> typescript-language

Modern TypeScript standards for type safety and maintainability. Use when working with types, interfaces, generics, enums, unions, or tsconfig settings. (triggers: **/*.ts, **/*.tsx, tsconfig.json, type, interface, generic, enum, union, intersection, readonly, const, namespace)

> typescript-best-practices

Idiomatic TypeScript patterns for clean, maintainable code. Use when writing or refactoring TypeScript classes, functions, modules, or async logic. (triggers: **/*.ts, **/*.tsx, class, function, module, import, export, async, promise)

┌ stats

installs/wk0
░░░░░░░░░░
github stars341
██████████
first seenMar 17, 2026
└────────────

┌ repo

HoangNguyen0403/agent-skills-standard
by HoangNguyen0403
└────────────

┌ tags

#data#react
└────────────