skills.rest
raulisai
raulisaiCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

next-cache-components

Implements Next.js 16 Cache Components with use cache, cacheLife, cacheTag, and PPR.

Updated Jun 8, 2026
Search Tags:#caching#next.js#app router#use cache#partial prerendering#cachelife#cachetag
One-click install
npx skills add https://github.com/raulisai/eva02 --skill next-cache-components-raulisai
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-cache-components
Source: https://github.com/raulisai/eva02/tree/main/.agents/skills/next-cache-components
Command: npx skills add https://github.com/raulisai/eva02 --skill next-cache-components-raulisai

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? It guides developers through adopting Next.js 16 Cache Components, replacing legacy caching APIs like unstable_cache and experimental.ppr with the new use cache directive, cache profiles, and tag-based invalidation while respecting tenant isolation rules. ## Core Features & Use Cases - Partial Prerendering Setup: Enable cacheComponents and mix static, cached, and dynamic content in a single route using Suspense boundaries. - Cache Configuration: Apply built-in cacheLife profiles (minutes, hours, days) or inline stale/revalidate/expire values, and tag entries with cacheTag for targeted invalidation via updateTag or revalidateTag. - Migration Guidance: Convert unstable_cache, force-dynamic, and route segment revalidate configs to the use cache model, including handling runtime APIs like cookies() via arguments or use cache: private. - Use Case: When upgrading an EVA dashboard page to Next.js 16, wrap slow aggregate queries in use cache with hourly revalidation, tag them per tenant, and stream user-specific notifications through Suspense. ## Quick Start Apply the next-cache-components skill to convert this Next.js page to use Cache Components with appropriate cacheLife and cacheTag settings.

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 Cache Components in Next.js 16?▼

Set cacheComponents: true in next.config.ts to enable Cache Components. This replaces the old experimental.ppr flag and allows mixing static, cached, and dynamic content in a single route.

How to migrate unstable_cache to use cache in Next.js?▼

Replace unstable_cache with an async 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.

Can I use cookies() or headers() inside use cache?▼

No, runtime APIs like cookies(), headers(), and searchParams are not allowed inside use cache. Extract the value outside and pass it as an argument, or use 'use cache: private' when refactoring is not possible.

What is the difference between updateTag and revalidateTag?▼

updateTag invalidates immediately so the same request sees fresh data, while revalidateTag refreshes in the background with stale-while-revalidate behavior. Use updateTag for mutations needing instant consistency.

What are the limitations of Next.js Cache Components?▼

Cache Components require the Node.js runtime and do not support Edge runtime or static export. Non-deterministic values like Math.random() or Date.now() inside use cache execute once at build time, so use connection() for request-time randomness.

Related Skills

Explore More Software Engineering Skills→
arthtyagiarthtyagi
1

next-cache-components

Implement Next.js Cache Components and partial prerendering for mixed static and dynamic routes.

Community
Advanced
snoodleboot-iosnoodleboot-io

edge-and-cdn-delivery

Configure CDN caching, cache headers, and edge delivery patterns for web origins.

Official
Intermediate
doanchienthangdevdoanchienthangdev
4

caching-strategies

Optimize application performance with multi-layer caching strategies including Redis, CDN, and HTTP headers.

Community
Advanced
ilyvscilyvsc
7

nextjs-data-fetching

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

Community
Advanced