Nextjs 14 获取 GET 请求响应被缓存直到下一个构建

Question

我的 next.js 项目中有这个 ProductsList 组件

const loadProducts = ()=>{
const response = await fetch("my-api-end-point", {
        method: "GET",
        headers: {
          "Content-Type": "application/json",
          "Cache-Control": "no-store", // Prevent caching
        },
      });
}

 useEffect(() => {
    loadProducts();
  }, []);

这是非常简单的代码，我在安装组件时调用一个函数来加载产品。 我有一个管理面板，可以在其中输入所有这些产品。在我的本地开发环境中，当我刷新页面时，新添加的产品通过 API 调用成功加载到组件中。

但是在生产环境中，这些产品在我发布新的生产版本之前不会加载。但在生产环境中，当我检查网络调用时，我看到它调用正确的端点，但响应似乎已缓存。我在该回复中没有看到最新产品。

端点响应似乎在构建过程中以某种方式被缓存。我添加了缓存控制：无存储标头，但结果是相同的。

如何使用 next.js 14 修复此问题？

Answer 1

问题：

似乎端点响应在构建过程中以某种方式被缓存了

可能原因：

默认情况下，Next.js 会尽可能多地缓存以提高性能并降低成本。这意味着除非您选择退出，否则路由将静态呈现并且数据请求将被缓存。 [1]

解决方案：

• Route Segment 配置选项 [2] [3]，将强制动态渲染 您的页面，这将导致为每个页面呈现路由 用户在请求时。

• 路由段选项允许您配置页面、布局或路由处理程序的行为。

• 在页面顶部添加此行（

  page.js

  的第一行），其中 您已导入

  ProductsList

  组件。

• 此外，如果您的

  my-api-end-point

  是 API 路由处理程序，请添加此 也在那里排队。

  这将防止您的页面和路由处理程序变得 在构建期间静态/缓存。

您可以使用下面的任何一行，两者都会强制动态渲染。

export const dynamic = 'force-dynamic' 

或

export const revalidate = 0

• revalidate

  [4] 选项，值为

  zero

  0，也将强制动态渲染。

---

了解更多：

• 路由段配置：https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config
• 动态：https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#dynamic
• 缓存：https://nextjs.org/docs/app/building-your-application/caching#overview
• 重新验证：https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate