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"時間を定義することができます。

知っておくとよい： ”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 days
        revalidate: 60 * 60 * 24, // 1 day
        expire: 60 * 60 * 24 * 14, // 14 days
      },
    },
  },
}

module.exports = nextConfig

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

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 hour
        revalidate: 900, // 15 minutes
        expire: 86400, // 1 day
      },
    },
  },
}

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 hour
    revalidate: 900, // 15 minutes
    expire: 86400, // 1 day
  })

  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 hour
    revalidate: 900, // 15 minutes
    expire: 86400, // 1 day
  })

  return <div>Page</div>
}

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

`use cache`と`cacheLife`のネスト使用

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

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

app/components/parent.tsx
// 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コンポーネントを定義しました：

app/components/child.tsx
// Child component
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のネスト使用​

使い方