Cache data in Next.js server components using the 'use cache' directive.
npx skills add https://github.com/zoonk/zoonk --skill cache-components-zoonk
Please help me install this Agent Skill. Skill: cache-components Source: https://github.com/zoonk/zoonk/tree/main/.agents/skills/cache-components Command: npx skills add https://github.com/zoonk/zoonk --skill cache-components-zoonk
Cache Components lets you co-locate data fetching, caching and rendering decisions inside React Server Components to deliver fast static shells with streaming content, reducing perceived load times and SSR costs.
Enable Cache Components in your Next.js project by turning on cacheComponents: true in next.config and begin annotating server components with 'use cache' to enable partial prerendering.
High-intent search queries and answers about installing and using this skill.
To use cache components in Next.js, enable cacheComponents: true in next.config and annotate server components with 'use cache'. This creates a static shell with streaming content using Suspense for partial prerendering.
The 'use cache' directive co-locates data fetching and caching inside React Server Components to deliver fast static shells. It requires functions to be async with serializable arguments and return values for granular performance gains.
Invalidate cached server components by assigning a cacheTag to cached functions and calling revalidateTag or updateTag to trigger background updates. This ensures precise invalidation and content freshness across routes.
Yes, cache components support multi-tenant Next.js scenarios through subshells and hierarchical caching patterns. You can compose pages with static shells and dynamic Suspense boundaries to improve reuse and scalability across tenants.
Cached functions must be async because the 'use cache' directive must be the first statement executed. This ensures serializable arguments and return values are properly coordinated with cacheLife and cacheTag for streaming and invalidation.
AngelP17Implement Next.js Cache Components with 'use cache', cacheLife, and cacheTag.
putto11262002Optimize server-side data fetching and caching in Next.js 16+ applications.
mauriciodelrioSelect and apply rendering strategies for React and Next.js applications.
Omar-CcConfigure Next.js 16 cache components and Partial Prerendering strategies.
