# Nextjs Cache Components Runtime

> Use for Next.js 16 Cache Components and runtime rendering work involving `use cache`, `cacheLife`, `cacheTag`, `updateTag`, Suspense, runtime APIs, Partial Prerendering, remote cache, metadata/viewport runtime access, or migration from older route segment caching configs.

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

---


# Next.js Cache Components Runtime

Use this skill when the task changes how a Next.js route is prerendered, streamed, cached, personalized, or invalidated. Make the cache boundary explicit instead of relying on older route-level dynamic/static flags.

## When to Apply

Use this skill when:
- Enabling or debugging `cacheComponents: true`
- Adding `use cache`, `cacheLife`, `cacheTag`, `updateTag`, or `revalidateTag`
- Fixing "uncached data outside Suspense" build/runtime errors
- Moving runtime APIs like `cookies()`, `headers()`, `params`, or `searchParams` through cached functions
- Migrating `dynamic`, `revalidate`, or previous-model caching code to Cache Components
- Designing cache behavior for self-hosted or serverless deployments

## Load On Demand

Start with this file. Load detailed files only when the task needs them:

```
references/_sections.md
references/cache-use-cache-scope.md
references/cache-runtime-suspense.md
references/cache-tag-invalidation.md
references/cache-remote-cache.md
references/cache-metadata-runtime.md
references/cache-migration-segment-configs.md
dataset/cache/use-cache-scope/correct.tsx
sources/inventory.json
```

Each rule file includes:
- Why the pattern matters
- Incorrect and correct examples
- Dataset path with larger TypeScript/TSX examples
- Official source references

## Rule Categories by Priority

| Priority | Category | Impact | Prefix |
|----------|----------|--------|--------|
| 1 | Cache Boundaries | CRITICAL | `cache-` |
| 2 | Data & Runtime Rendering | HIGH | `data-` |
| 3 | Operations & Deployment | HIGH | `ops-` |

## Source Policy

Use official Next.js 16 docs for Cache Components. Do not rely on Next.js 13/14/15 caching advice unless the project has not enabled `cacheComponents`.