next-cache-components

Enable partial prerendering in Next.js 16+ with cacheComponents and 'use cache'.

77|3|Updated Mar 24, 2026

Search Tags:#performance #next.js #cache #cache-components #server-rendering #prerendering

Ready to run

npx skills add https://github.com/FlorianBruniaux/starmapper --skill next-cache-components-florianbruniaux

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: next-cache-components
Source: https://github.com/FlorianBruniaux/starmapper/tree/main/.agents/skills/next-cache-components
Command: npx skills add https://github.com/FlorianBruniaux/starmapper --skill next-cache-components-florianbruniaux

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Cache Components enables Partial Prerendering (PPR) by mixing static, cached, and dynamic content in a single route, improving performance and control over rendering.

Core Features & Use Cases

Enable Partial Prerendering to mix static shell, cached data, and dynamic content within a route.
Leverage the 'use cache' directive, cacheLife, and cacheTag to fine-tune caching and invalidation.
Deploy in Next.js 16+ apps to optimize initial payloads, reduce unnecessary recomputation, and support granular revalidation strategies.

Quick Start

Enable cache components in next.config.ts and annotate a data-fetching function with 'use cache' to start caching.

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 to mix static and dynamic content in Next.js?▼

You enable partial prerendering by setting cacheComponents to true in next.config.ts and adding the 'use cache' directive to data-fetching functions. This mixes static, cached, and dynamic content in a single route.

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

The 'use cache' directive is an annotation for data-fetching functions in Next.js 16+ that enables caching. It works with cacheLife and cacheTag APIs to fine-tune caching and invalidation across components.

How do I fine-tune cache invalidation for cached components in Next.js?▼

You fine-tune cache invalidation using the cacheTag and cacheLife APIs alongside the 'use cache' directive. cacheTag tags cached data for targeted invalidation, while cacheLife controls the caching duration.

Do I need Next.js 16 to use cache components?▼

Yes, cache components require Next.js 16 or higher. You must enable cacheComponents in next.config.ts and use the 'use cache' directive to leverage partial prerendering for optimizing initial payloads.

Why should I use partial prerendering instead of fully dynamic server-rendering?▼

Partial prerendering improves performance by mixing a static shell with cached data while deferring dynamic content. This reduces unnecessary recomputation and optimizes initial payloads while balancing performance with data freshness.

What are the limitations of using 'use cache' for server rendering in Next.js?▼

Using 'use cache' requires enabling cacheComponents in your Next.js config and applies to Next.js 16+. You must manage cache invalidation carefully using cacheTag and cacheLife to ensure dynamic content remains fresh.