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

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).userId
  const getCachedUser = unstable_cache(
    async () => {
      return { id: userId }
    },
    [userId], // ユーザーIDをキャッシュキーに追加
    {
      tags: ['users'],
      revalidate: 60,
    }
  )

  //...
}

バージョン履歴​

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