skills.rest
abraham-yusuf
abraham-yusufCOMMUNITY
Explore all skills by this author →
𝕏@bram0511GitHub

next-cache-components

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

2|1|Updated Apr 17, 2025
Search Tags:#caching#migration#next.js#server components#use cache#partial prerendering#cachetag
One-click install
npx skills add https://github.com/abraham-yusuf/pernikahan-web --skill next-cache-components-abraham-yusuf
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-cache-components
Source: https://github.com/abraham-yusuf/pernikahan-web/tree/main/.agents/skills/next-cache-components
Command: npx skills add https://github.com/abraham-yusuf/pernikahan-web --skill next-cache-components-abraham-yusuf

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve? Next.js 16 replaces legacy caching APIs like unstable_cache, force-dynamic, and route-level revalidate with the new Cache Components model, and developers need clear guidance to adopt Partial Prerendering, the use cache directive, and tag-based invalidation correctly. ## Core Features & Use Cases - Partial Prerendering Patterns: Combine static shells, cached components, and dynamic Suspense boundaries in a single route. - Cache Configuration: Apply built-in cacheLife profiles (minutes, hours, days) or inline stale/revalidate/expire values, plus remote and private cache variants. - Tag-Based Invalidation: Use cacheTag, updateTag, and revalidateTag for immediate or background cache refresh after mutations. - Migration Guidance: Convert unstable_cache, force-static, and revalidate exports to the use cache directive. - Use Case: When building a dashboard page, cache aggregate stats with cacheLife('hours') and cacheTag('dashboard-stats'), stream fresh notifications through a Suspense boundary, and invalidate the stats tag from a Server Action after data updates. ## Quick Start Ask the AI to refactor a Next.js page to use Cache Components with use cache, cacheLife, and Suspense for dynamic sections.

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. This replaces the old experimental.ppr flag and enables the use cache directive, cacheLife, and cacheTag APIs across the App Router.

How to migrate from unstable_cache to use cache?▼

Replace unstable_cache wrappers with a function containing the 'use cache' directive. Move options.tags into cacheTag() calls and options.revalidate into cacheLife({ revalidate: N }); manual keyParts arrays are no longer needed because keys derive from arguments and closures.

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

Runtime APIs are forbidden inside cached scopes because cached output must be request-independent. Extract the value outside and pass it as an argument, or use 'use cache: private' when compliance requirements prevent refactoring.

What is the difference between updateTag and revalidateTag?▼

updateTag invalidates immediately so the same request sees fresh data, while revalidateTag triggers background revalidation with stale-while-revalidate behavior. Use updateTag in Server Actions after mutations requiring instant consistency.

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

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

Related Skills

Explore More Software Engineering Skills→
DexploarerDexploarer
7

nextjs-page-generator

Generate Next.js 13+ App Router pages, components, and API routes.

Community
Intermediate
openaiopenai
5.3k

cdn-caching

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

Official
Advanced
JYHTHEGREATJYHTHEGREAT

cache-components

Co-locate caching logic with Next.js server components using 'use cache', cacheLife, and cacheTag.

Community
Advanced
Mte90Mte90
51

Next.js Data Fetching

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

Community
Intermediate