Claude-skill-registry Next.js Caching Architecture

The 4 layers of caching (Memoization, Data Cache, Full Route, Router Cache).

install

source · Clone the upstream repo

git clone https://github.com/majiayu000/claude-skill-registry

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

T=$(mktemp -d) && git clone --depth=1 https://github.com/majiayu000/claude-skill-registry "$T" && mkdir -p ~/.claude/skills && cp -r "$T/skills/data/caching-hoangnguyen0403-agent-skills-standar" ~/.claude/skills/majiayu000-claude-skill-registry-next-js-caching-architecture && rm -rf "$T"

manifest: skills/data/caching-hoangnguyen0403-agent-skills-standar/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 over
unstable_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'
```
and
```
cacheLife()
```
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.