cacheLife

cacheLife 関数は、関数またはコンポーネントのキャッシュ寿命を設定するために使用されます。この関数は use cache ディレクティブと併用し、関数またはコンポーネントのスコープ内で使用する必要があります。

使用方法

cacheLife を使用するには、next.config.js ファイルで dynamicIO フラグ を有効にします：

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

次に、関数またはコンポーネントのスコープ内で cacheLife 関数をインポートして呼び出します：

'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
 
export default async function Page() {
  cacheLife('hours')
  return <div>Page</div>
}

リファレンス

デフォルトのキャッシュプロファイル

Next.jsは様々な時間スケールに基づいた名前付きキャッシュプロファイルのセットを提供しています。use cache ディレクティブと一緒に cacheLife 関数でキャッシュプロファイルを指定しない場合、Next.jsは自動的に「default」キャッシュプロファイルを適用します。

ただし、キャッシュ動作を明示的に定義するために、use cache ディレクティブを使用する際には常にキャッシュプロファイルを追加することをお勧めします。

キャッシュプロファイルを参照するための文字列値には固有の意味はなく、セマンティックなラベルとして機能します。これにより、コードベース内でキャッシュされたコンテンツをより理解しやすく管理できるようになります。

カスタムキャッシュプロファイル

next.config.ts ファイルの cacheLife オプションにカスタムキャッシュプロファイルを追加して設定できます。

キャッシュプロファイルは以下のプロパティを含むオブジェクトです：

"stale"プロパティは staleTimes 設定とは異なり、クライアント側のルーターキャッシュを特に制御します。staleTimes は動的データと静的データの両方のすべてのインスタンスに影響するグローバル設定ですが、cacheLife 設定では関数ごとまたはルートごとに "stale" 時間を定義できます。

補足: "stale"プロパティは Cache-control: max-age ヘッダーを設定しません。代わりにクライアント側のルーターキャッシュを制御します。

例

再利用可能なキャッシュプロファイルの定義

next.config.ts ファイルに再利用可能なキャッシュプロファイルを作成できます。ユースケースに合った名前を選び、stale、revalidate、expire プロパティの値を設定します。必要な数のカスタムキャッシュプロファイルを作成できます。各プロファイルは、cacheLife 関数に渡される文字列値によって名前で参照できます。

import type { NextConfig } from 'next'
 
const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
    cacheLife: {
      biweekly: {
        stale: 60 * 60 * 24 * 14, // 14日
        revalidate: 60 * 60 * 24, // 1日
        expire: 60 * 60 * 24 * 14, // 14日
      },
    },
  },
}
 
module.exports = nextConfig

上記の例では、14日間キャッシュし、毎日更新を確認し、14日後にキャッシュを期限切れにします。その後、アプリケーション全体でこのプロファイルを名前で参照できます：

'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
 
export default async function Page() {
  cacheLife('biweekly')
  return <div>Page</div>
}

デフォルトキャッシュプロファイルの上書き

デフォルトのキャッシュプロファイルは、キャッシュ可能な出力の鮮度や陳腐化の度合いを考える上で便利な方法を提供しますが、アプリケーションのキャッシュ戦略により適合するように、異なる名前付きプロファイルを設定することもできます。

デフォルトと同じ名前で新しい設定を作成することで、デフォルトの名前付きキャッシュプロファイルを上書きできます。

以下の例では、デフォルトの "days" キャッシュプロファイルを上書きする方法を示しています：

const nextConfig = {
  experimental: {
    dynamicIO: true,
    cacheLife: {
      days: {
        stale: 3600, // 1時間
        revalidate: 900, // 15分
        expire: 86400, // 1日
      },
    },
  },
}
 
module.exports = nextConfig

インラインでのキャッシュプロファイルの定義

特定のユースケースでは、cacheLife 関数にオブジェクトを渡すことで、カスタムキャッシュプロファイルを設定できます：

'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'
 
export default async function Page() {
  cacheLife({
    stale: 3600, // 1時間
    revalidate: 900, // 15分
    expire: 86400, // 1日
  })
 
  return <div>Page</div>
}

このインラインキャッシュプロファイルは、作成された関数またはファイルにのみ適用されます。アプリケーション全体で同じプロファイルを再利用したい場合は、next.config.ts ファイルの cacheLife プロパティに設定を追加できます。

use cache と cacheLife のネスト使用

同一ルートまたはコンポーネントツリー内で複数のキャッシュ動作を定義する場合、内部キャッシュが独自の cacheLife プロファイルを指定している場合、外部キャッシュはそれらの中で最も短いキャッシュ期間を尊重します。これは、外部キャッシュが独自の明示的な cacheLife プロファイルを定義していない場合にのみ適用されます。

たとえば、キャッシュプロファイルを指定せずにページに use cache ディレクティブを追加すると、デフォルトのキャッシュプロファイルが暗黙的に適用されます（cacheLife("default")）。ページにインポートされたコンポーネントも独自のキャッシュプロファイルで use cache ディレクティブを使用している場合、外部と内部のキャッシュプロファイルが比較され、プロファイルで設定された最も短い期間が適用されます。

// 親コンポーネント
import { unstable_cacheLife as cacheLife } from 'next/cache'
import { ChildComponent } from './child'
 
export async function ParentComponent() {
  'use cache'
  cacheLife('days')
 
  return (
    <div>
      <ChildComponent />
    </div>
  )
}

そして別のファイルで、インポートされた子コンポーネントを定義しています：

// 子コンポーネント
import { unstable_cacheLife as cacheLife } from 'next/cache'
 
export async function ChildComponent() {
  'use cache'
  cacheLife('hours')
  return <div>Child Content</div>
 
  // このコンポーネントのキャッシュは、より短い 'hours' プロファイルを尊重します
}