Next.js Cache Components

Next.js

Next.js 16 Cache Components — enable Partial Prerendering with static, cached, and dynamic content types.

Overview

Next.js Cache Components teaches the agent how to use the cache component model introduced in Next.js 16. This skill covers Partial Prerendering (PPR), which allows a single route to mix static shell content, cached data, and dynamic personalized content — all without sacrificing performance.

The skill provides guidance on the three content types (Static, Cached, Dynamic) and the APIs that control them: cacheLife, cacheTag, and updateTag.

When to Use

• Implementing Partial Prerendering (PPR) in a Next.js 16+ project
• Need to mix static and dynamic content on the same page
• Setting up cache strategies with cacheLife for time-based revalidation
• Using cacheTag and updateTag for on-demand cache invalidation
• Migrating from older Next.js caching patterns to the cache component model

Key Features

• Partial Prerendering (PPR) — static shell with dynamic holes, best of both worlds
• Three content types:
  • Static — rendered at build time, never revalidated
  • Cached — uses the "use cache" directive with configurable lifetimes
  • Dynamic — rendered per-request, personalized content
• cacheLife API — define named cache profiles with stale, revalidate, and expire durations
• cacheTag API — tag cached content for granular invalidation
• updateTag API — programmatically invalidate cached content by tag (e.g., after a mutation)
• Suspense integration — dynamic content wrapped in Suspense boundaries for streaming

Example Prompts

"Set up PPR on my product page with a static shell and dynamic pricing"
"Add cache tags to my blog posts so I can revalidate on publish"
"Configure cacheLife profiles for my e-commerce catalog data"

Source

• Skill folder: skills/next-cache-components/
• Standard: agentskills.io