next.js 重建后,Vercel服务静态文件的陈旧版本

wfsdck30  于 2023-04-11  发布在  其他
关注(0)|答案(1)|浏览(159)

我在Vercel缓存中遇到了一个看似重要的问题。

背景

  • 我有一个用Next.js 13构建的应用程序,托管在Vercel上
  • 该应用程序通过GraphQL获取Contentful中的数据
  • 应用程序的页面是静态生成的(构建输出的屏幕截图可以在下面看到)
    问题
  • 在Vercel上构建/重新部署应用程序时,他们在文档中声明删除旧缓存
  • 当重新部署后第一次访问网站时,它会显示正确的(不是陈旧的)页面
  • 当重新访问网站时,它突然开始显示旧的(陈旧的)页面
    屏幕截图
    构建输出:

HTTP请求和响应,重部署后第一次页面访问:

后续访问站点的HTTP请求和响应:

问题与评论

x-vercel-cache头文件可以看出,当客户端在重新部署后第一次访问页面时,Vercel确实会从静态构建中获取新的(非陈旧的)文件(这里是PRERENDER的定义)。
然而,在随后的访问中,它显示陈旧/旧的数据。这些数据是从Vercel缓存提供的(x-vercel-cache头中的HIT)。由于一些奇怪的原因,在第一次访问期间,Vercel缓存看起来并没有使用静态构建的最新文件进行更新。

你知道这里发生了什么,以及如何修复它?
编辑:

我有几个发现,这些如下:

  • 通过在构建时删除.next/cache,我们可以确定在构建时运行的fetch不会从.next/cache获取旧数据
  • 在构建时删除该缓存文件夹比将revalidate: X添加到获取中更好,因为在后一种方法中,应用程序中的第一次获取总是从该高速缓存中获取陈旧的数据
  • 通过在构建时删除该文件夹,next build + next start在本地的一切都可以正常工作
  • 但是,在Vercel部署中,该问题仍然存在
  • 因此,问题似乎出在Vercel Edge缓存上
  • 在浏览器第一次命中时,无论是通过从首页预加载 test-entry 页面(在视口中可以看到指向它的链接),还是通过直接在 test-entry 页面上重新加载浏览器,都会从构建缓存中检索正确的数据
  • 现在,当我们再次访问 test-entry 页面时,我们在x-vercel-cache中看到了一个HIT,但是旧的陈旧数据被提供
  • 因此,Vercel Edge缓存似乎在第一次访问后实际上没有更新(当我们在x-vercel-cache头中获得PRERENDER时)
hlswsv35

hlswsv351#

这似乎是在Vercel上部署的Next 13的某些版本的问题。在我的情况下,我运行的是v13.2.4
Next刚刚发布了v13.3.0,它似乎已经解决了这个缓存问题。
使用npm更新:
npm install next@13.3.0 --save
发布链接:https://github.com/vercel/next.js/releases/tag/v13.3.0

相关问题