next-cache-components

Enable selective prerendering and caching of Next.js routes with Cache Components.

Updated Aug 23, 2026
One-click install
npx skills add https://github.com/cedriking/zenda --skill next-cache-components-cedriking
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: next-cache-components
Source: https://github.com/cedriking/zenda/tree/main/.agents/skills/next-cache-components
Command: npx skills add https://github.com/cedriking/zenda --skill next-cache-components-cedriking

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Next.js 16 Cache Components enable Partial Prerendering (PPR) by mixing static, cached, and dynamic content in a single route.

Core Features & Use Cases

  • Static (Auto-Prerendered): Synchronous code and pure computations prerendered at build time.
  • Cached (use cache): Async data that can be cached across requests with cacheLife and cacheTag.
  • Dynamic (Suspense): Runtime data via Suspense for fresh updates.

Quick Start

Enable Cache Components by setting cacheComponents: true in next.config.ts and start using the 'use cache' directive in your components and functions.

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 partial prerendering in Next.js 16?▼

To enable partial prerendering in Next.js 16, set `cacheComponents: true` in your `next.config.ts` file and apply the `use cache` directive to components mixing static, cached, and dynamic content.

What is the `use cache` directive used for in Next.js?▼

The `use cache` directive in Next.js is used to cache asynchronous data across requests. It works with helpers like `cacheLife` and `cacheTag` to control caching lifecycles and enable targeted invalidation.

How do I invalidate cached content in Next.js Cache Components?▼

You invalidate cached content in Next.js Cache Components using helpers like `cacheTag` and `updateTag`. These allow in-code directives to selectively invalidate cached routes when underlying data changes.

Can I mix static and dynamic content in a single Next.js route?▼

Yes, Next.js 16 Cache Components allow mixing static, cached, and dynamic content in a single route. Synchronous code prerenders at build time, while Suspense boundaries handle fresh runtime data.

Does Next.js Cache Components require any specific configuration to start?▼

Yes, using Next.js Cache Components requires enabling the feature by setting `cacheComponents: true` in `next.config.ts`. This allows you to start using `use cache` and related caching directives.

When should I use cacheLife versus cacheTag in Next.js?▼

Use `cacheLife` to control the duration and lifecycle of cached async data, and use `cacheTag` to label cached entries for targeted invalidation via `updateTag` when underlying data changes.