我在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时)
1条答案
按热度按时间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