Setup & Installation
Or with the ClawHub CLI, for registry-managed skill folders outside a full OpenClaw workspace:
What This Skill Does
Next.js 16 Cache Components enable Partial Prerendering (PPR), letting you mix static, cached, and dynamic content within a single route. The `use cache` directive marks async functions or components for caching with configurable lifetimes and tag-based invalidation, replacing the older `unstable_cache()` API and `experimental.ppr` flag.
The `use cache` directive generates cache keys automatically from function arguments and closures, removing the manual key array management that `unstable_cache` required.
When to use it
- Caching database query results with configurable TTLs
- Building dashboards that blend static headers, cached stats, and streaming notifications
- Invalidating specific product cache entries after an admin update
- Migrating from unstable_cache to the use cache directive in an existing app
- Passing user session data as props to keep cached components runtime-compliant
Example Workflow
Here's how your AI assistant might use this skill in practice.
User asks: How do I cache a product list and invalidate it when a product is updated?
- 1Enable cacheComponents: true in next.config.ts
- 2Add 'use cache' and cacheTag('products') to the getProducts async function
- 3Set a cache lifetime with cacheLife('hours') inside the function
- 4Call revalidateTag('products') inside a server action after the database update
Product list is served from cache on subsequent requests and refreshed in the background after the next mutation