01. 基本的な use cache

「use cache」ディレクティブの3つのレベル（ファイル、コンポーネント、関数）を理解しましょう。

ファイルレベルキャッシュ

ファイルの先頭に 'use cache' を配置すると、ファイル全体がキャッシュされます

基礎
ファイルレベルの例
"use cache";

// このファイル全体がキャッシュされます
async function getData() {
  return {
    timestamp: new Date().toISOString(),
    value: Math.random(),
  };
}

export default async function Page() {
  const data = await getData();
  return <div>{data.timestamp}</div>;
}

実行結果

HIT12:10:47
タイムスタンプ:
2025-11-20T12:10:47.123Z
ランダム値:
0.022252

💡 ページをリロードしても、同じタイムスタンプとランダム値が表示されます。 これはページ全体がキャッシュされているためです。

⚠️ 重要な動作

  • • ビルド時に一度だけ実行されます
  • • 同じ入力に対して同じ出力を返します
  • • cacheLife()で再検証タイミングを制御できます
  • • デフォルトでは無期限にキャッシュされます

コンポーネントレベルキャッシュ

特定のコンポーネントだけをキャッシュしたい場合に使用します

基礎
コンポーネントレベルの例
// コンポーネントレベルのキャッシュ
async function CachedComponent() {
  "use cache";

  const data = await fetchData();
  return <div>{data.value}</div>;
}

export default function Page() {
  return (
    <div>
      <CachedComponent /> {/* このコンポーネントだけキャッシュ */}
    </div>
  );
}

使用ケース

  • • 部分的なキャッシング: ページの一部だけキャッシュしたい
  • • 再利用可能なコンポーネント: 複数のページで共通して使うコンポーネント
  • • 条件付きレンダリング: 表示される場合のみキャッシュ

関数レベルキャッシュ

データ取得関数の結果をキャッシュする最も細かい制御

基礎
関数レベルの例
// 関数レベルのキャッシュ
async function getCachedData() {
  "use cache";

  return await fetchExpensiveData();
}

export default async function Page() {
  const data = await getCachedData(); // この関数の結果がキャッシュ
  return <div>{data}</div>;
}

使用ケース

  • • API呼び出し: 外部APIのレスポンスをキャッシュ
  • • 重い計算: 計算結果を再利用
  • • データベースクエリ: 同じクエリ結果をキャッシュ

✅ ベストプラクティス

  • • 関数レベルは最も細かい制御ができるため、推奨されます
  • • 関数の引数がキャッシュキーとして使われます
  • • 複数の場所から同じ関数を呼んでもキャッシュを共有します

次のステップ

基本的な「use cache」の使い方を理解したら、次は「cacheLife()」でキャッシュの有効期限を制御する方法を学びましょう。

02. cacheLife() プロファイル →