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

unstable_cache

Note: この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);
  ...
}

Good to know:

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

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

パラメータ​

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
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,
    }
  )

  //...
}

バージョン履歴​

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