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は、様々な時間スケールに基づいた名前付きキャッシュプロファイルを提供します。`cacheLife` 関数で `use cache` ディレクティブとともにキャッシュプロファイルを指定しない場合、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 days
        revalidate: 60 * 60 * 24, // 1 day
        expire: 60 * 60 * 24 * 14, // 14 days
      },
    },
  },
}
 
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 hour
        revalidate: 900, // 15 minutes
        expire: 86400, // 1 day
      },
    },
  },
}
 
module.exports = nextConfig

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

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

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

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

use cacheとcacheLifeのネストされた使用

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

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

// Parent component
import { unstable_cacheLife as cacheLife } from 'next/cache'
import { ChildComponent } from './child'
 
export async function ParentComponent() {
  'use cache'
  cacheLife('days')
 
  return (
    <div>
      <ChildComponent />
    </div>
  )
}

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

// Child component
import { unstable_cacheLife as cacheLife } from 'next/cache'
 
export async function ChildComponent() {
  'use cache'
  cacheLife('hours')
  return <div>Child Content</div>
 
  // This component's cache will respect the shorter 'hours' profile
}