Agent skill
Next.js Caching Architecture
The 4 layers of caching (Memoization, Data Cache, Full Route, Router Cache).
Stars
163
Forks
31
Install this agent skill to your Project
npx add-skill https://github.com/majiayu000/claude-skill-registry/tree/main/skills/data/caching-hoangnguyen0403-agent-skills-standar
Metadata
Additional technical details for this skill
- labels
-
nextjs caching isr revalidation
- triggers
-
{ "files": [ "**/page.tsx", "**/layout.tsx", "**/action.ts" ], "keywords": [ "unstable_cache", "revalidateTag", "Router Cache", "Data Cache" ] }
SKILL.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.
Didn't find tool you were looking for?