> nextjs-caching
The 4 layers of caching in Next.js. Use when configuring request memoization, data cache, full-route cache, or router cache in Next.js. (triggers: **/page.tsx, **/layout.tsx, **/action.ts, unstable_cache, revalidateTag, Router Cache, Data Cache)
curl "https://skillshub.wtf/HoangNguyen0403/agent-skills-standard/nextjs-caching?format=md"Caching Architecture
Priority: P1 (HIGH)
Next.js has 4 distinct caching layers. Understanding them prevents stale data bugs.
Modern Standard: Cache Components (Next.js 16+)
[!IMPORTANT] Next.js 16 favors the
'use cache'directive overunstable_cache. Wrap dynamic runtime data in<Suspense>.
Core Protocol
- Dynamic Shell: Keep layouts static or cached; use
<Suspense>for user-specific data. - Deterministic Cache: Add
'use cache'andcacheLife()to server functions. - Invalidation:
updateTag(): Immediate sync reflect.revalidateTag(): Background refresh (SWR).
The 4 Caching Layers
| Layer | Where | Control |
|---|---|---|
| Request Memoization | Server | React cache() |
| Data Cache | Server | 'use cache', revalidateTag |
| Full Route Cache | Server | Static Prerendering |
| Router Cache | Client | router.refresh() |
Implementation Details
See Cache Components & PPR for detailed key generation, closure constraints, and invalidation strategies.
🚫 Anti-Patterns
- Do NOT use standard patterns if specific project rules exist.
- Do NOT ignore error handling or edge cases.
> 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)