skills.rest
aashahin
aashahinCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-cache-components

Implement Next.js 16 Cache Components with use cache, cacheLife, and cacheTag for Partial Prerendering.

Updated Jun 22, 2026
Search Tags:#caching#migration#next.js#server components#use cache#partial prerendering#cachetag
One-click install
npx skills add https://github.com/aashahin/ai-skills --skill next-cache-components-aashahin
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-cache-components
Source: https://github.com/aashahin/ai-skills/tree/main/next-cache-components
Command: npx skills add https://github.com/aashahin/ai-skills --skill next-cache-components-aashahin

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Next.js 16 replaces legacy caching APIs like unstable_cache and route segment config with Cache Components, and developers need clear guidance on mixing static, cached, and dynamic content in a single route without misusing runtime APIs. ## Core Features & Use Cases - Partial Prerendering Setup: Enable cacheComponents in next.config.ts and structure pages with static shells, cached components, and Suspense-wrapped dynamic content. - Cache Control APIs: Apply the use cache directive at file, component, or function level with cacheLife profiles and cacheTag-based invalidation via updateTag and revalidateTag. - Migration Guidance: Convert unstable_cache, force-dynamic, force-static, and revalidate exports to the new directive-based model. - Use Case: Build a dashboard where the header renders statically from CDN, stats are cached with hourly revalidation and tagged invalidation, and user notifications stream in dynamically via Suspense. ## Quick Start Enable cacheComponents in my Next.js 16 config and refactor my dashboard page to use the use cache directive with cacheLife and cacheTag.

Frequently Asked Questions about next-cache-components

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I enable Partial Prerendering in Next.js 16?▼

Set cacheComponents: true in next.config.ts to enable Cache Components, which replaces the old experimental.ppr flag. Then structure routes with static content, use cache components, and Suspense boundaries for dynamic data.

How do I migrate from unstable_cache to use cache?▼

Replace unstable_cache wrappers with a function containing the 'use cache' directive. Move options.tags to cacheTag() calls, options.revalidate to cacheLife({ revalidate: N }), and drop manual keyParts since cache keys generate automatically from arguments and closures.

Why can't I use cookies() inside use cache?▼

Runtime APIs like cookies(), headers(), and searchParams are not allowed inside use cache because cached output must be request-independent. Extract the value outside and pass it as an argument, or use 'use cache: private' for compliance cases.

What is the difference between updateTag and revalidateTag?▼

updateTag invalidates immediately so the same request sees fresh data, while revalidateTag triggers background stale-while-revalidate so the next request gets updated content. Use updateTag after mutations needing instant consistency.

Does Next.js Cache Components work with Edge runtime or static export?▼

No, Cache Components require the Node.js runtime and a server, so Edge runtime and static export are not supported. Non-deterministic values like Math.random() inside use cache also execute once at build time.

Related Skills

Explore More Software Engineering Skills→
perimetreperimetre

caching

Implement Next.js App Router caching with the 'use cache' directive.

Official
Advanced
openaiopenai
5.3k

cdn-caching

Diagnose Vercel CDN cache hit rates, stale content, revalidation behavior, and ISR costs.

Official
Advanced
djankiesdjankies

using-cache-lifecycle-apis

Automate cache invalidation and policy management for Next.js 16 data.

Community
Intermediate
ilyvscilyvsc
7

nextjs-data-fetching

Implement Next.js data fetching with SWR and React Query caching strategies.

Community
Advanced