cache-componentsスキルでNext.jsの「use cache」とPPRを実装する方法

Next.jsでページの一部を静的に、一部を動的にレンダリングしたい。Partial Prerendering（PPR）と'use cache'ディレクティブを使えば実現できますが、キャッシュ戦略の設計は複雑です。

この記事では、Next.jsリポジトリのcache-componentsスキルを使って、'use cache'とPPRを効果的に実装する方法を解説します。

このスキルは何をしてくれるのか

cache-componentsは、Next.jsプロジェクトでPPRとキャッシュ戦略を実装するためのガイドを提供するスキルです：

• 'use cache'ディレクティブの適用方法（ファイル・コンポーネント・関数レベル）
• cacheLife()によるキャッシュ期間の制御
• cacheTag()とupdateTag()/revalidateTag()によるキャッシュ無効化
• Suspense境界を使った静的シェル＋動的コンテンツのパターン
• next.configでcacheComponents: trueが有効なプロジェクトで自動的にトリガー

Next.jsアプリケーションのパフォーマンスを最適化したい開発者に向いています。

インストール方法

前提条件

• Claude Codeがインストール済みであること
• Next.jsプロジェクト（cacheComponents: true設定推奨）

インストールコマンド

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

使い方

基本的なキャッシュの適用

コンポーネントにキャッシュを適用するには、'use cache'ディレクティブを記述します：

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

キャッシュの無効化

Server Actionからキャッシュを無効化できます：

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

export async function createPost(formData: FormData) {
  await db.posts.create({ data: formData })
  updateTag('posts')  // 即時無効化
}

updateTag()は即時無効化（read-your-own-writes）、revalidateTag()はバックグラウンド再検証（stale-while-revalidate）です。

PPRのメンタルモデル

PPRは「静的シェル＋キャッシュされたコンテンツ＋動的ストリーミング」で構成されます。Suspense境界でコンテンツを分割し、各部分のキャッシュ戦略を独立して設定します。

知っておくべき注意点

cacheLife()のプロファイル選択

cacheLife()には'hours'、'days'などのプリセットプロファイルがあります。カスタム設定も可能ですが、next.configでの事前定義が必要です。

シリアライズ可能なpropsのみ

'use cache'が適用されたコンポーネントに渡すpropsは、シリアライズ可能である必要があります。関数やクラスインスタンスは渡せません。

React Server Componentsが前提

この機能はReact Server Componentsの上に構築されています。Client Components（'use client'）には'use cache'を適用できません。

まとめ

cache-componentsスキルを使うと、Next.jsの'use cache'ディレクティブとPPRの実装をガイドに沿って進められます。静的シェル＋キャッシュ＋動的コンテンツの組み合わせで、パフォーマンスとリアルタイム性を両立できます。

関連リンク

→ cache-components スキル詳細