从 Next 测试 Unstable_cache 没有做我认为应该做的事情

Question

我无法创建unstable_cache 标签..

希望存储一些变化很小但被调用很多的 prisma 查询，在我的测试中，虽然我看到了缓存的响应，但看起来它仍在运行函数调用。这是我的测试代码。我不知道这是否可以在本地运行，因此我添加了客户报告以防止客户错过。

这是我的测试代码，选择 0-2 之间的数字，在延迟 4 秒的函数中等待随机数 0-510。通过标签键将await函数的结果缓存在不稳定的缓存中。当我看到相同的 0-2 数字重新出现时，它与之前的“相同”，但看起来它仍在等待函数返回，而我认为它不应该返回。

沙箱链接https://codesandbox.io/p/devbox/clever-mayer-nczc3p?file=%2Fpackage.json%3A16%2C31

import { unstable_cache } from "next/cache";
export const dynamic = "force-dynamic";
import { Suspense } from "react";

export default async function Out() {
  return (
    <div>
      <h2>Test Unstable Cache</h2>
      <Suspense fallback="Grabbing random number">
        <Test />
      </Suspense>
    </div>
  );
}
async function Test() {
  const numberUsed = await getRandomInt(2);
  const cacheValue = `numberUsed_${numberUsed}`;

  console.log(cacheValue);
  // Use async/await to fetch and cache data
  const cacheResponse = await unstable_cache(
    async () => getRandomInt(510), 
    [cacheValue],
    { revalidate: 90000 },
  )();

  console.log(numberUsed + " returns " + cacheResponse);
  let text = numberUsed + " returns " + cacheResponse;

  return text;
}

async function getRandomInt(max) {
  console.log("miss");
  const delay = (ms) => new Promise((res) => setTimeout(res, ms));

  await delay(4000);
  return Math.floor(Math.random() * max);
}

Answer 1

unstable_cache 实际上正在工作，使用相同的函数为标签生成随机密钥显示未命中，我的错误在这里