尽管在获取请求中使用了缓存，但在 Vercel 上部署 Nextjs13 应用程序时数据未更新：“no-store”

Question

我的应用程序中有一个提要组件，用于从 API 端点获取数据。当我在本地构建上测试该组件时，该组件工作正常，但当我将其部署在 Vercel 上时，它无法获取最新数据。我怀疑这个问题与缓存有关。为了解决这个问题，我在 fetch 请求中添加了 cache: 'no-store' 选项，但似乎并没有解决问题。我将不胜感激任何解决此问题的帮助或建议。

"use client";

  const fetchPosts = async () => {
    const response = await fetch("/api/prompt", {
      cache: 'no-store',
    });
    const data = await response.json();
    setAllPosts(data);
  };

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

GitHub 链接： https://github.com/justinwkUKM/promptify/blob/main/components/Feed.jsx

注意：请针对在 Vercel 上部署时的缓存问题提供任何建议或解决方案。谢谢你！

Answer 1

对于在部署到 Vercel 时仍然遇到此问题的任何人：

\n

该问题是由 Next.JS 静态渲染文件引起的。根据文档：默认情况下，Next.js 静态渲染路由以提高性能。

\n

npm run build您可以在执行时打印的输出中看到这一点。下面显示了一个简单的输出示例。

\n

Route (app)\n\xe2\x94\x8c \xe2\x97\x8b /api/prompt\n\xe2\x94\x94 \xce\xbb /api/prompt/[id]\n\n\xce\xbb  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)\n\xe2\x97\x8b  (Static)  automatically rendered as static HTML (uses no initial props)\n

\n

为了防止 Next.JS 静态呈现该站点，它需要某种方法来了解其动态。根据文档：如果发现动态函数或动态 fetch() 请求（无缓存），Next.js 将切换为在请求时动态渲染整个路由。

\n

可以使用Next.JS 的路由段配置功能来控制路由的静态和动态行为

\n

具体来说，您可以导出值为\'force-dynamic\'如图所示的动态变量

\n

Route (app)\n\xe2\x94\x8c \xe2\x97\x8b /api/prompt\n\xe2\x94\x94 \xce\xbb /api/prompt/[id]\n\n\xce\xbb  (Server)  server-side renders at runtime (uses getInitialProps or getServerSideProps)\n\xe2\x97\x8b  (Static)  automatically rendered as static HTML (uses no initial props)\n

\n

此导出可确保 Next.JS 动态渲染路线！

\n

一点旁注： \n这在功能上类似于export const revalidate = 0;根据文档添加。

\n