Next Cache Components

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

kimtth 42dbbff 1.2 KB Updated

File contents

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

kimtth/agent-skill-100-lines-or-less/tree/main/skills/next-cache-components commit 42dbbffdd2

Frequently asked questions

npx skillmds@latest add kimtth/next-cache-components