为什么Next.js中这个fetch请求的结果没有被缓存？

Question

我在 Next.js 中有 以下服务器组件：

export default async function Home() {
  async function fetch_visits() {
    return (
      await (
        await fetch(
          'https://webcodingcenternextjs9lrayfq-mqjz--3000--60a75bde.local-credentialless.webcontainer.io/data',
          { cache: 'force-cache' }
        )
      ).json()
    ).visits;
  }
  return (
    <>
      <p>Count: {await fetch_visits()}</p>
      <p>Count: {await fetch_visits()}</p>
      <p>Count: {await fetch_visits()}</p>
    </>
  );
}

我希望输出是：

Count: 2

Count: 2

Count: 2

但结果是

Count: 2

Count: 3

Count: 4

为什么内置缓存不起作用？

有关缓存获取的更多信息可以在此处找到。

Answer 1

我刚刚意识到我必须静态构建站点并运行生产服务器进行缓存。问题是我使用的是热重载开发服务器。