Menu

unstable_cache

警告: このAPIは安定性に達した時点でuse cacheに置き換わります。

unstable_cacheを使用すると、データベースクエリなどの負荷の高い処理の結果をキャッシュし、複数のリクエスト間で再利用できます。

import { getUser } from './data';
import { unstable_cache } from 'next/cache';
 
const getCachedUser = unstable_cache(
  async (id) => getUser(id),
  ['my-app-user']
);
 
export default async function Component({ userID }) {
  const user = await getCachedUser(userID);
  ...
}

補足:

  • キャッシュスコープ内でheaderscookiesなどの動的なデータソースにアクセスすることはサポートされていません。キャッシュされた関数内でこのデータが必要な場合は、キャッシュされた関数の外でheadersを使用し、必要な動的データを引数として渡してください。
  • このAPIはNext.jsの組み込みデータキャッシュを使用して、リクエストとデプロイメント間で結果を永続化します。

パラメータ

const data = unstable_cache(fetchData, keyParts, options)()
  • fetchData:キャッシュしたいデータを取得する非同期関数です。Promiseを返す関数である必要があります。
  • keyParts:キャッシュの識別をさらに追加する追加のキーの配列です。デフォルトでは、unstable_cacheは既に引数と関数の文字列化バージョンをキャッシュキーとして使用しています。ほとんどの場合はオプションですが、パラメータとして渡さない外部変数を使用する場合にのみ使用する必要があります。ただし、パラメータとして渡さないクロージャを使用する場合は、それらを追加することが重要です。
  • options:キャッシュの動作を制御するオブジェクトです。以下のプロパティを含めることができます:
    • tags:キャッシュの無効化を制御するために使用できるタグの配列です。Next.jsはこれを関数の一意の識別に使用しません。
    • revalidate:キャッシュを再検証するまでの秒数です。falseを省略するか渡して無期限でキャッシュするか、revalidateTag()またはrevalidatePath()メソッドが呼び出されるまでキャッシュします。

返り値

unstable_cacheは呼び出された時にキャッシュされたデータに解決される Promise を返す関数を返します。データがキャッシュに存在しない場合、提供された関数が呼び出され、その結果がキャッシュされて返されます。

app/page.tsx
TypeScript
import { unstable_cache } from 'next/cache'
 
export default async function Page({
  params,
}: {
  params: Promise<{ userId: string }>
}) {
  const { userId } = await params
  const getCachedUser = unstable_cache(
    async () => {
      return { id: userId }
    },
    [userId], // キャッシュキーにユーザーIDを追加
    {
      tags: ['users'],
      revalidate: 60,
    }
  )
 
  //...
}

バージョン履歴

バージョン変更内容
v14.0.0導入時期:unstable_cache