Agent skill · software engineering · aiskillstore
next-cache-components
Next.js 16 Cache Components - PPR, use cache directive, cacheLife, cacheTag, updateTag
Why this skill is useful
Provides specific implementation patterns and directives for caching in Next.js 16 that the AI wouldn't reliably generate on its own.
What it needs
About 4k tokens when loaded. Last updated 2026-08-07. 405 stars on the source repository.
What this skill does
Cache Components (Next.js 16+) Cache Components enable Partial Prerendering (PPR) - mix static, cached, and dynamic content in a single route. Enable Cache Components This replaces the old experimental.ppr flag. --- Three Content Types With Cache Components enabled, content falls into three categories: 1. Static (Auto-Prerendered) Synchronous code, imports, pure computations - prerendered at build time: 2. Cached (use cache) Async data that doesn't need fresh fetches every request: 3. Dynamic (Suspense) Runtime data that must be fresh - wrap in Suspense: --- use cache Directive File Level Component Level Function Level --- Cache Profiles Built-in Profiles cacheLife() - Custom Lifetime Built-in profiles: 'default', 'minutes', 'hours', 'days', 'weeks', 'max' Inline Configuration --- Cache Invalidation cacheTag() - Tag Cached Content updateTag() - Immediate Invalidation Use when you need the cache refreshed within the same request: revalidateTag() - Background Revalidation Use for stale-while-revalidate behavior: --- Runtime Data Constraint Cannot access cookies(), headers(), or searchParams inside use cache. Solution: Pass as Arguments Exception: use cache: private For compliance requirements when you can't refactor: --- Cache Key Generation Cache keys are automatic based on: Build ID - invalidates all caches on deploy Function ID - hash of function location Serializable arguments - props become part of key Closure variables - outer scope values included --- Complete Example --- Migration from Previous Versions Old Config Replacement ----------- ------------- experimental.ppr cacheComponents: true dynamic = 'force-dynamic' Remove (default behavior) dynamic = 'force-static' 'use cache' + cacheLife('max') revalidate = N cacheLife({ revalidate: N }) unstablecache() 'use cache' directive --- Limitations Edge runtime not supported - requires Node.js Static export not supported - needs server Non-deterministic values (Math.random(), Date.now()) execute once at build time in …
How to use it
Reference it in AdaL, Claude Code, Cursor or any coding agent — nothing to install:
@skills aiskillstore/next-cache-components