Setup & Installation
npx skills add https://github.com/vercel-labs/next-skills --skill next-cache-components
https://github.com/vercel-labs/next-skills/tree/main/skills/next-cache-components
View on GitHubWhat This Skill Does
Next.js 16 Cache Components enable Partial Prerendering (PPR) by mixing static, cached, and dynamic content in a single route. The `use cache` directive replaces `unstable_cache` and lets you cache async functions, components, or entire pages with configurable lifetimes and tag-based invalidation.
Unlike `unstable_cache`, `use cache` generates cache keys automatically from function arguments and closures, removing the need to manually define key arrays or manage stale data patterns by hand.
When to use it
- Caching database query results with hourly revalidation on a product listing page
- Tagging cached product data and invalidating specific entries on form submission
- Migrating unstable_cache calls to use cache directives in an existing Next.js app
- Passing session cookies outside a cached component to keep the cache key stable
- Mixing a static nav, cached stats, and a dynamic notifications stream on a single dashboard route