logo

Next16 新機能 - Cache Components

2025-11-26
a month ago

開発環境

  • next 16.0.3
  • react 19.2.0
  • react-dom 19.2.0

前提

Next.js 16 で導入された Cache Components はオプトインで有効化するキャッシュ機構です。サーバーコンポーネント単位で「コンポーネント出力のキャッシュ」を明示的に有効にでき、従来の Next.js の自動キャッシュによる「意図しない古いデータ利用」や制御困難さを軽減します。

本題

有効化（next.config.js）

next.config.jsでオプトインを有効にします。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  cacheComponents: true,
}
 
export default nextConfig

"use cache" ディレクティブの使い方（サンプル）

サーバーコンポーネントファイルの先頭に文字列ディレクティブ "use cache" を置くことで、そのファイル（コンポーネント）の出力が Next 側でキャッシュされます。

// app/components/Posts.tsx
"use cache";

export default async function Posts() {
  const res = await fetch("https://api.example.com/posts", { next: { revalidate: 60 } });
  const posts = await res.json();

  return (
    <ul>
      {posts.map(p => (
        <li key={p.id}>{p.title}</li>
      ))}
    </ul>
  );
}
  • "use cache" を付けたコンポーネントはサーバーで生成された HTML の結果をキャッシュ対象にできます。
  • fetch() の next オプション（revalidate など）やタグ再検証 API（revalidateTag / updateTag）と組み合わせて、再検証戦略をより細かく制御できます。

キャッシュの粒度と挙動

  • コンポーネント単位でオプトイン

　👉 キャッシュを有効化したいコンポーネントにだけ "use cache" を付ける。全体の挙動を変えずに、影響範囲を限定できる。

  • 入力依存のキャッシュ

　👉 コンポーネントに props を渡す場合、同一の入力（props）に対して同じキャッシュが使われる設計。必要ならキー設計やタグで制御する。

なぜオプトインが良いのか（利点）

  • 従来の自動キャッシュは「いつ・どの結果がキャッシュされるか」が分かりづらく、期待しない古いデータが出ることがありました。
  • オプトインにより、キャッシュを使う場所を明示的に制御でき、キャッシュ失効・再検証の戦略を局所的に設計でき、結果として運用やデバッグが容易になります。

さいごに

Next.js 16 の Cache Componentsは、従来 Next が行ってきた自動的なキャッシュ挙動に悩まされていたケースを解消するための改善です。オプトインである点を活かし、影響範囲を限定して安全にキャッシュを導入することができます。実装の際は revalidate やタグ再検証 API と合わせ、必要な一貫性と鮮度を担保する設計が重要です。

参照