# Next Cache Components

> Use when: apply Next.js caching correctly — use cache, cacheLife, cacheTag, PPR, and revalidation.

- Skill: `kimtth/next-cache-components` (Agent Skill)
- Install (CLI): `npx skillmds@latest add kimtth/next-cache-components`
- Raw SKILL.md: https://api.skillmd.com/api/skills/kimtth/next-cache-components/raw
- Safety review: pending
- Works with: Claude Code, Claude.ai, OpenAI Codex
- Category: Web & Frontend
- Author: kimtth (https://skillmd.com/u/kimtth)
- Updated: 2026-09-17
- Page: https://skillmd.com/skills/kimtth/next-cache-components

---


Goal: cache the right data at the right granularity and invalidate cleanly.

Use for:
- choosing a caching strategy per route or data source
- stale or over-cached pages after deploys
- mixing static and dynamic content on one route

Workflow:
1. Classify each data source: static, revalidated, or dynamic.
2. Wrap cacheable work with the use cache directive.
3. Set freshness with cacheLife profiles per data type.
4. Tag cached entries with cacheTag for targeted invalidation.
5. Invalidate with revalidateTag/revalidatePath on writes.
6. Use Partial Prerendering to serve a static shell with dynamic holes.

Decisions:
- static content: cache aggressively, long cacheLife
- frequently changing: short cacheLife or tag-based revalidation
- per-request/user data: keep dynamic, do not cache
- mixed pages: PPR with Suspense boundaries

Rules:
- tag anything you may need to invalidate later
- revalidate by tag on the mutation that changes the data
- never cache user-specific or secret-bearing responses
- verify freshness after deploy, not just locally