next.js 14 fetch 缓存丢失原因：（自动缓存）

Question

我正在构建 next.js 14 应用程序路由器项目，并在设置 api 请求时遇到问题。为了进行外部 api 调用，我使用了内置缓存的 next fetch。

缓存似乎适用于简单的调用：

const getPageData = async () => {
  const pageId = 123;
  return await fetch(`http://myapi.com/page/{pageId}`)
}

但是当我尝试从

headers().get("pageId")

（

import { headers } from "next/headers";

）获取价值时失败了：

const getPageData = async () => {
  const pageId = headers().get("pageId");
  return await fetch(`http://myapi.com/page/{pageId}`)
}

第二个代码片段结果为

Cache missed reason: (auto cache)

这种行为有什么原因吗？是否有一些不使用

'force-cache'

的解决方法？

更新：

使用“动态功能”之一（

cookies()

、

headers()

、

searchParams

）切换到动态渲染。

Answer 1

默认情况下，使用标头或 cookies 将选择退出缓存。

来自文档：“Next.js 提供了在服务器组件中获取数据时可能需要的有用功能，例如 cookie 和标头。这些功能将导致路由动态呈现，因为它们依赖于请求时间信息”

-- 选择退出数据缓存 如果满足以下条件，则不会缓存获取请求：

缓存：添加“no-store”来获取请求。 revalidate: 0 选项被添加到各个提取请求中。 获取请求位于使用 POST 方法的路由器处理程序内。 使用标头或 cookie 后会出现获取请求。 使用 const dynamic = 'force-dynamic' 路径段选项。 fetchCache 路由段选项默认配置为跳过缓存。 获取请求使用 Authorization 或 Cookie 标头，并且组件树中其上方有一个未缓存的请求。