How to Implement Next.js 'use cache' and PPR with cache-components

Want to render parts of a Next.js page statically and others dynamically? Partial Prerendering (PPR) with the 'use cache' directive makes this possible, but designing caching strategies is complex.

This article explains how to implement 'use cache' and PPR effectively using the cache-components skill from the Next.js repository.

What This Skill Does

cache-components provides guidance for implementing PPR and caching strategies in Next.js:

• 'use cache' directive application (file, component, function level)
• Cache duration control via cacheLife()
• Cache invalidation with cacheTag(), updateTag(), and revalidateTag()
• Static shell + dynamic content patterns using Suspense boundaries
• Auto-triggers in projects with cacheComponents: true in next.config

Suited for developers optimizing Next.js application performance.

Installation

Prerequisites

• Claude Code installed
• Next.js project (with cacheComponents: true recommended)

Install Command

Copyclaude mcp add github.com/vercel/next.js/tree/canary/.claude/skills/cache-components

Usage

Applying Cache

Add the 'use cache' directive to a component:

Copyasync function CachedPosts() {
  'use cache'
  cacheLife('hours')
  cacheTag('posts')
  const posts = await db.posts.findMany()
  return <PostList posts={posts} />
}

Cache Invalidation

Invalidate from Server Actions:

Copy'use server'
import { updateTag } from 'next/cache'

export async function createPost(formData: FormData) {
  await db.posts.create({ data: formData })
  updateTag('posts')  // Immediate invalidation
}

updateTag() provides immediate invalidation (read-your-own-writes); revalidateTag() provides background revalidation (stale-while-revalidate).

PPR Mental Model

PPR is "static shell + cached content + dynamic streaming." Use Suspense boundaries to segment content with independent caching strategies.

Important Considerations

cacheLife() Profile Selection

cacheLife() offers preset profiles like 'hours' and 'days'. Custom configurations require pre-definition in next.config.

Serializable Props Only

Props passed to 'use cache' components must be serializable. Functions and class instances cannot be passed.

React Server Components Required

This feature builds on React Server Components. 'use cache' cannot be applied to Client Components ('use client').

Summary

cache-components guides implementation of Next.js 'use cache' and PPR. The static shell + cache + dynamic content pattern balances performance with real-time data.

Related Links

→ cache-components Skill Details