skills.rest
vercel
vercelOFFICIAL
Explore all skills by this author →
Website𝕏@vercelGitHub

cache-components

Co-locate caching with React Server Components using cacheLife and cacheTag directives.

142k|31.7k|Updated Oct 5, 2016
Search Tags:#suspense#next.js#cache#invalidation#server-components#cache-components#partial-prerendering
One-click install
npx skills add https://github.com/vercel/next.js --skill cache-components-vercel
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: cache-components
Source: https://github.com/vercel/next.js/tree/main/.claude-plugin/plugins/cache-components/skills/cache-components
Command: npx skills add https://github.com/vercel/next.js --skill cache-components-vercel

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cache Components enable developers to co-locate caching decisions with UI, merging static shells with dynamic streaming to optimize performance in Next.js apps.

Core Features & Use Cases

  • Proactive activation in projects with cacheComponents: true, guiding data fetching, server actions, and caching decisions within components.
  • Co-located caching: use 'use cache', cacheLife, cacheTag, updateTag, revalidateTag, and revalidatePath to control caching and invalidation.
  • Suspense-driven streaming: wrap dynamic content to enable partial prerendering and smooth UX across pages and layouts.

Quick Start

Enable cache components in next.config.ts, then write functions with the 'use cache' directive and use cacheLife/cacheTag, wrapping dynamic content in Suspense for streaming.

Frequently Asked Questions about cache-components

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

FAQPage Schema
How do I enable partial prerendering with Next.js Server Components?▼

Partial prerendering is enabled by activating cacheComponents: true in next.config.ts and wrapping dynamic content in Suspense boundaries to stream data within Next.js Server Components.

What is the 'use cache' directive in Next.js?▼

The 'use cache' directive co-locates caching decisions directly with UI components in Next.js, allowing you to merge static shells with dynamic streaming for optimized performance.

How do I invalidate cached data in Next.js Server Components?▼

Cache invalidation in Server Components is handled using API-based caching directives like cacheTag, updateTag, revalidateTag, and revalidatePath to control and refresh cached data.

Does cacheComponents work with Suspense-driven streaming across pages and layouts?▼

Yes, cacheComponents applies to Next.js projects with the feature enabled, addressing Suspense-driven streaming and partial prerendering across both pages and layouts for smooth UX.

How do I control cache lifespans in Next.js Server Components?▼

You control cache lifespans by using the cacheLife directive alongside the 'use cache' marker within Server Components to define specific caching durations and invalidation rules.

When should I use cache components instead of traditional Next.js data fetching?▼

Use cache components to co-locate caching decisions with UI components when you need partial prerendering and Suspense-driven streaming, merging static shells with dynamic data fetching.

Related Skills

Explore More Software Engineering Skills→
usenotrausenotra
148

next-cache-components

Implement Partial Prerendering in Next.js 16+ using Cache Components.

Official
Advanced
lexand-devlexand-dev

next-cache-components

Configure Next.js 16+ Cache Components with PPR and cache directives.

Community
Intermediate
zoonkzoonk
146

cache-components

Cache data in Next.js server components using the 'use cache' directive.

Official
Advanced
AngelP17AngelP17
1

cache-components

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

Community
Advanced