next-cache-components

Configure selective prerendering with cache components in Next.js 16+.

Updated Nov 2, 2025

Search Tags:#react #nextjs #web-development #ssr #cache-components #use-cache #prerendering

Ready to run

npx skills add https://github.com/cpmappstudio/cpca-sports --skill next-cache-components-cpmappstudio

💬 Prompt for ChatGPT / Claude Chat▼

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

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

This skill solves the challenge of delivering fast, hybrid-rendered Next.js pages by enabling Partial Prerendering (PPR) that blends static, cached, and dynamic content in a single route.

Core Features & Use Cases

Static (Auto-Prerendered): content rendered at build time for instant delivery.
Cached (use cache): asynchronous data that can be reused across requests with configurable lifetimes.
Dynamic (Suspense): runtime data that requires fresh fetches and can stream with a fallback UI.
Fine-grained invalidation: cacheTag and updateTag enable targeted, immediate or background cache refresh.
Flexible keying: cache keys derive from function location, arguments, and outer scope to ensure correct cache isolation.
Practical workflows: ideal for dashboards, blogs, and data-heavy routes that need a blend of speed and freshness.

Quick Start

Enable cache components in your Next.js config and annotate your components or data-fetching functions with the use cache directive 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 does partial prerendering work in Next.js to mix static and dynamic content?▼

Partial prerendering in Next.js blends static, cached, and dynamic content in a single route by using the 'use cache' directive for reusable data and Suspense boundaries for fresh runtime fetches. This allows instant delivery of static shells while streaming dynamic data.

How do I enable cache components for selective prerendering in a Next.js project?▼

To enable cache components, add cacheComponents to your Next.js config and annotate components or data-fetching functions with the 'use cache' directive. This activates selective prerendering to optimize routes needing both fast initial renders and fresh data.

Do I need Next.js 16 or newer to use the use cache directive for prerendering?▼

Yes, cache components require Next.js 16 or newer. The feature relies on the cacheComponents config option and the 'use cache' directive introduced in that version to properly manage static, cached, and dynamic content blending.

What is the best way to invalidate cached Next.js route content without a full page refresh?▼

The best way to invalidate cached Next.js route content is using cacheTag and updateTag. These enable targeted, immediate, or background cache refresh for specific cached components without invalidating the entire route or rebuilding static content.

Can I use cache components for data-heavy dashboards that need both fast initial loads and up-to-date data?▼

Yes, cache components are ideal for data-heavy dashboards. They combine auto-prerendered static content for instant loads with cached data via 'use cache' and dynamic Suspense boundaries to ensure dashboard metrics remain up-to-date.

Why are my Next.js cache component keys colliding when using the use cache directive?▼

Next.js cache component keys derive from function location, arguments, and outer scope to ensure correct cache isolation. If keys collide, verify that your cached functions have distinct locations, unique arguments, or properly scoped outer variables for accurate cache separation.