cacheLife

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

使用法

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

TypeScript
JavaScript

next.config.ts
import type { NextConfig } from 'next'

const nextConfig: NextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

next.config.js
const nextConfig = {
  experimental: {
    dynamicIO: true,
  },
}

export default nextConfig

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

TypeScript
JavaScript

app/page.tsx
'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife('hours')
  return <div>Page</div>
}

app/page.js
'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ディレクティブを使用する際には、キャッシュの動作を明示的に定義するために、常にキャッシュプロファイルを追加することをお勧めします。

プロファイル	Stale	Revalidate	Expire	説明
`default`	undefined	15分	INFINITE_CACHE	頻繁な更新が不要なコンテンツに適したデフォルトプロファイル
`seconds`	undefined	1秒	1分	ほぼリアルタイムの更新が必要な急速に変化するコンテンツ向け
`minutes`	5分	1分	1時間	1時間以内に頻繁に更新されるコンテンツ向け
`hours`	5分	1時間	1日	毎日更新されるが、少し古くても問題ないコンテンツ向け
`days`	5分	1日	1週間	毎週更新されるが、1日古くても問題ないコンテンツ向け
`weeks`	5分	1週間	1ヶ月	毎月更新されるが、1週間古くても問題ないコンテンツ向け
`max`	5分	1ヶ月	INFINITE_CACHE	更新がほとんど不要な非常に安定したコンテンツ向け

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

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

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

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

プロパティ	値	説明	要件
`stale`	`number`	クライアントがサーバーを確認せずに値をキャッシュする期間。	任意
`revalidate`	`number`	サーバーでキャッシュを更新する頻度；再検証中に古い値が提供されることがあります。	任意
`expire`	`number`	動的フェッチに切り替える前に値が古くなることができる最大期間；`revalidate`より長くなければなりません。	任意 - `revalidate`より長くなければなりません

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

Good to know: "stale"プロパティはCache-control: max-ageヘッダーを設定しません。代わりに、クライアントサイドのrouterキャッシュを制御します。

例

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

next.config.tsファイルに再利用可能なキャッシュプロファイルを定義することで作成できます。使用例に適した名前を選び、stale、revalidate、expireプロパティの値を設定します。必要に応じて、カスタムキャッシュプロファイルをいくつでも作成できます。各プロファイルは、cacheLife関数に渡される文字列値としてその名前で参照できます。

TypeScript
JavaScript

next.config.ts
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

next.config.js
const 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日後にキャッシュが期限切れになります。このプロファイルは、アプリケーション全体でその名前で参照できます：

app/page.tsx
'use cache'
import { unstable_cacheLife as cacheLife } from 'next/cache'

export default async function Page() {
  cacheLife('biweekly')
  return <div>Page</div>
}

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

デフォルトのキャッシュプロファイルは、キャッシュ可能な出力の新鮮さや古さを考えるのに役立ちますが、アプリケーションのキャッシュ戦略により適合する異なる名前付きプロファイルを好むかもしれません。

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

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

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

module.exports = nextConfig

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

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

TypeScript
JavaScript

app/page.tsx
'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>
}

app/page.js
'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`のネストされた使用

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

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

app/components/parent.tsx
// 親コンポーネント
import { unstable_cacheLife as cacheLife } from 'next/cache'
import { ChildComponent } from './child'

export async function ParentComponent() {
  'use cache'
  cacheLife('days')

  return (
    <div>
      <ChildComponent />
    </div>
  )
}

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

app/components/child.tsx
// 子コンポーネント
import { unstable_cacheLife as cacheLife } from 'next/cache'

export async function ChildComponent() {
  'use cache'
  cacheLife('hours')
  return <div>Child Content</div>

  // このコンポーネントのキャッシュは、より短い 'hours' プロファイルを尊重します
}

使用法​

リファレンス​

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

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

例​

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

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

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

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

使用法