メインコンテンツまでスキップ

unstable_cache

バージョン15では、代わりに 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);
  ...
}

知っておくと良いこと:

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

警告: このAPIは不安定であり、将来的に変更される可能性があります。必要に応じて、このAPIが安定化する際に移行ドキュメントやコードモッドを提供します。

パラメータ​

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

戻り値​

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

例​

app/page.tsx
import { unstable_cache } from 'next/cache'

export default async function Page({ params }: { params: { userId: string } }) {
  const getCachedUser = unstable_cache(
    async () => {
      return { id: params.userId }
    },
    [params.userId], // ユーザーIDをキャッシュキーに追加
    {
      tags: ['users'],
      revalidate: 60,
    }
  )

  //...
}

バージョン履歴​

VersionChanges
v14.0.0unstable_cache が導入されました。