跳到主要内容

unstable_cache

警告： 当 use cache 达到稳定状态时，此 API 将被其替代。

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 内置的 数据缓存 来在请求和部署之间持久化结果。

参数​

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

  //...
}

版本历史​

版本更改
v14.0.0引入了 unstable_cache。
最后于 更新