skills.rest
alecanche04-cyber
alecanche04-cyberCOMMUNITY
Explore all skills by this author →
GitHub

next-cache-components

Implement Next.js 16 Cache Components with use cache, cacheLife, and cacheTag directives.

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Next.js 16 replaces legacy caching APIs like experimental.ppr, unstable_cache, and route segment config with Cache Components, and developers need clear guidance on enabling Partial Prerendering, applying the use cache directive correctly, and invalidating cached data without runtime errors. ## Core Features & Use Cases - Partial Prerendering Setup: Enable cacheComponents in next.config.ts and mix static, cached, and dynamic content in a single route using Suspense boundaries. - Cache Lifetime and Tagging: Configure 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 calls, force-dynamic flags, and revalidate exports to the use cache directive with automatic cache key generation. - Use Case: When building a dashboard that mixes a static shell, hourly-refreshed stats, and per-user notifications, apply use cache with cacheLife('hours') to the stats component and wrap the dynamic notifications in Suspense. ## Quick Start Enable cacheComponents in my Next.js 16 config and refactor my page to use the use cache directive with cacheLife and cacheTag for cached data fetching.

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 and Partial Prerendering. This replaces the old experimental.ppr flag and lets you mix static, cached, and dynamic content in one route.

How do I 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 the manual keyParts array 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 cannot depend on per-request data. 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 a cache tag 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. Edge runtime and static export are not supported, and non-deterministic values like Math.random() inside use cache execute once at build time.

Related Skills

Explore More Software Engineering Skills→
prowler-cloudprowler-cloud
14.7k

nextjs-16

Implements Next.js 16 App Router patterns including Server Components, Server Actions, and proxy.ts.

Official
Intermediate
Adithiya-SAdithiya-S

cdn-caching

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

Community
Advanced
brandonarbinibrandonarbini

next-caching

Implements 'use cache', cacheTag, and invalidation patterns for Next.js App Router applications.

Community
Intermediate
Mte90Mte90
51

Next.js Data Fetching

Explain Next.js App Router data fetching with caching and revalidation strategies.

Community
Intermediate