NextJS 14 - 缓存未在 Vercel 服务器上重新验证

Question

我有一个项目，在我的主页上有一些关于它的统计数据。因为我不想每次都从数据库中获取它，所以我尝试在这里实现一些缓存。然而，缓存似乎没有在 vercel 服务器上正确失效。

我的代码： 我有从 API 获取数据的客户端组件：

  const [data, setData] = useState<HomePageAllStats>(null as any);

  useEffect(() => {
    const fetchData = async () => {
      const response = await fetch(`URL/api/stats`, { cache: 'no-store' });
      const data = await response.json();
      setData(data);
    };

    fetchData();
  }, []);
}

在客户端组件中，我显然没有任何缓存。之后我就有了我的 api 路线：

export async function GET() {
  try {
    const statsPromise = unstable_cache(getStats, ['stats'], { revalidate: 60 });
    const stats = await statsPromise();
    const mappedCountryStats = mapStats(stats.source);
    const data: HomePageAllStats = {
      totalCount: stats.total,
      countries: mappedCountryStats,
    };
    return Response.json(data);
  } catch (error) {
    console.error('Error getting stats:', error);
    return Response.json({});
  }
}

async function getStats(): Promise<TotalStats> {
  const documentReference = await admin.firestore().collection('stats').doc('total').get();
  return documentReference.data() as TotalStats;
}

这里我使用unstable_cache进行60秒的重新验证。 （我更喜欢在服务器而不是客户端上重新验证，这样别人就不会向我的 API 发送垃圾邮件，并且总是能得到新的结果）。

问题： 看起来如果我使用 build 和 start 命令构建此代码，一切正常，1 分钟后缓存重新验证并显示新结果。

当我将它部署在 vercel 上时，它的行为很奇怪。构建后的第一个请求显示数据库中的新结果。但是在我进行整页重新加载后，会从缓存加载一些旧数据。这就像一天前一样有效。

知道我的代码有什么问题吗？或者我可以尝试解决什么问题？

Answer 1

问题：

我正在使用unstable_cache进行60秒的重新验证。似乎如果我使用 build 和 start 命令构建此代码，一切正常，1 分钟后缓存重新验证并显示新结果。当我将其部署在 vercel 上时，它表现得很奇怪。构建后的第一个请求显示数据库中的新结果。但是在我进行整页重新加载后，会从缓存加载一些旧数据。这就像一天前一样有效。

可能的原因：

• 您使用了unstable_cache：有一个警告1，这是API，不稳定，将来可能会发生变化。

可能的解决方案：

• 路由段配置允许您通过设置各种选项来配置页面、布局或路由处理程序的行为3。

在路线文件顶部添加

export const revalidate = 60

/api/stats

这会将重新验证频率设置为 60 秒。

export const revalidate = 60
export async function GET() {
...
...

}

因此，60 秒内的 API 调用将获取相同的数据，60 秒后，将在缓存的 API 调用上重新获取数据，然后给出。

请阅读：

• 不稳定缓存：https://nextjs.org/docs/app/api-reference/functions/unstable_cache
• 重新验证：https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config#revalidate
• 路由段配置：https://nextjs.org/docs/app/api-reference/file-conventions/route-segment-config

如果您有任何疑问，请发表评论（如果有必要我会更新答案）