Why Use This
This skill provides specialized capabilities for HoangNguyen0403's codebase.
Use Cases
- Developing new features in the HoangNguyen0403 repository
- Refactoring existing code to follow HoangNguyen0403 standards
- Understanding and working with HoangNguyen0403's codebase structure
Install Guide
2 steps - 1
- 2
Install inside Ananke
Click Install Skill, paste the link below, then press Install.
https://github.com/HoangNguyen0403/agent-skills-standard/tree/develop/skills/nextjs/caching
Skill Snapshot
Auto scan of skill assets. Informational only.
Valid SKILL.md
Checks against SKILL.md specification
Source & Community
Updated At Jan 18, 2026, 04:24 AM
Skill Stats
SKILL.md 42 Lines
Total Files 2
Total Size 1.6 KB
License NOASSERTION
---
name: Next.js Caching Architecture
description: The 4 layers of caching in Next.js. Use when configuring request memoization, data cache, full-route cache, or router cache in Next.js.
metadata:
labels: [nextjs, caching, isr, revalidation]
triggers:
files: ['**/page.tsx', '**/layout.tsx', '**/action.ts']
keywords: [unstable_cache, revalidateTag, Router Cache, Data Cache]
---
# 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 over `unstable_cache`. Wrap dynamic runtime data in `<Suspense>`.
### **Core Protocol**
1. **Dynamic Shell**: Keep layouts static or cached; use `<Suspense>` for user-specific data.
2. **Deterministic Cache**: Add `'use cache'` and `cacheLife()` to server functions.
3. **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](references/CACHE_COMPONENTS.md) for detailed key generation, closure constraints, and invalidation strategies.
