Apply Cache Components patterns to Next.js projects with cacheComponents enabled.
npx skills add https://github.com/jidohyun/NOD --skill cache-components-jidohyun
Please help me install this Agent Skill. Skill: cache-components Source: https://github.com/jidohyun/NOD/tree/main/.agents/skills/cache-components Command: npx skills add https://github.com/jidohyun/NOD --skill cache-components-jidohyun
Cache Components and Partial Prerendering (PPR) patterns in Next.js help teams optimize server-rendered and client-rendered content by conditionally caching expensive outputs, reducing re-renders, and improving perceived performance when cacheComponents is enabled.
Enable cacheComponents in your Next.js config and apply the 'use cache' patterns across your server and client components to begin caching.
High-intent search queries and answers about installing and using this skill.
Use the 'use cache' directive in Next.js server components to conditionally cache expensive outputs. You apply it directly to components and server actions to reduce re-renders and improve perceived performance when the cacheComponents flag is enabled.
The best way to invalidate cached data in Next.js Cache Components is using the revalidateTag() or expireTag() APIs. You assign specific tags with cacheTag() during caching, allowing targeted invalidation of stale data without clearing the entire cache.
cacheLife defines the duration for cached outputs in Next.js Partial Prerendering. It works with the 'use cache' directive to control how long conditionally cached server-rendered content remains valid before becoming stale and requiring regeneration.
You need to enable cacheComponents in your next.config file when you want to apply Cache Components patterns to optimize data fetching and rendering. This flag activates the proactive caching capabilities for both server and client components.
Your Next.js 'use cache' directive may not work if cacheComponents is not enabled in next.config. Debugging Cache Component implementations requires verifying proper static versus dynamic content boundaries and ensuring correct API usage for cache invalidation.
Yes, you can apply caching patterns to client components in Next.js. The Cache Components optimization scope covers both server and client components, guiding the use of 'use cache', cacheLife, and cacheTag to optimize rendering across pages.
datamonsterrEnable selective prerendering in Next.js apps using cache components.
Sim-hub22Enable Partial Prerendering in Next.js 16+ with cache components and directives.
miklosmeConfigure deterministic route caching in Next.js 16 with Cache Components.
yuki-yanoApply performance optimization patterns to React and Next.js codebases.
