4

I have come across a seemingly significant issue with the Vercel cache.

Background

  • I have an app built with Next.js 13, hosted on Vercel
  • The app pulls data from Contentful, via GraphQL fetches
  • The app's pages are statically generated (screen shot of build output can be seen below)

Problem

  • When building / redeploying the application on Vercel, they state in their docs that they delete the old cache
  • When visiting the website for the first time after redeploying, it shows the right (not stale) pages
  • When re-visiting the website, it suddenly starts showing the old (stale) pages

SCREEN SHOTS

Build output:

enter image description here

HTTP Request and Response, on first page visit after redeploying:

enter image description here

enter image description here

HTTP Request and Response on subsequent visits to the site:

enter image description here

enter image description here

Observations and Question

As seen from the x-vercel-cache header, Vercel does indeed grab the new (non-stale) files from the static build when a client first visits the page after redeploying (definition of PRERENDER here).

On subsequent visits, however, it shows stale / old data. That data was served from the Vercel cache (HIT in the x-vercel-cache header). For some bizarre reason, it does not look like the Vercel cache was updated with the latest files from the static build, during the first visit.

Any idea what is going on here, and how to fix it?

Edit:

I have made a few findings, these are as follows:

  • By deleting the .next/cache on build, we are certain that the fetches running build-time do not get old data from .next/cache
  • Deleting that cache folder build-time is a better approach than adding revalidate: X to the fetch, because in the latter alternative the first fetch in the app will always get stale data from the cache
  • By deleting that folder on build, everything works as expected with next build + next start locally
  • The issue still persists on the live Vercel deployment, however
  • Therefore, it seems the problem is with the Vercel Edge cache
  • On first hit by the browser, whether via pre-loading the test-entry page from the front page (as a link to it is visible in the viewport), or by re-loading the browser directly on the test-entry page, the correct data is retrieved from the Build cache
  • Now, when we visit the test-entry page again, we see a HIT in the x-vercel-cache, but old stale data is served
  • As such, it seems the Vercel Edge cache is not actually updated after the first visit (when we got PRERENDER in the x-vercel-cache header)
Magnus
  • 6,791
  • 8
  • 53
  • 84
  • I'm having the same issue as you Magnus. The data fetched from my CMS is always fresh when building and running Next 13 locally or Next 13 running on other hosting providers, so I agree there's an issue with Vercel's Edge Cache. I now have my website running on Railway for now as a workaround. – Brendan Apr 04 '23 at 18:07
  • @Brendan Yeah, a bit frustrating. I got a temporary workaround from the Vercel team, which actually works. You can check it out here: https://github.com/orgs/vercel/discussions/1808#discussioncomment-5534900 . They say it has to do with Next, but that seems odd because the problem is non-existent on Netlify. I like Vercel and don't want to talk them down, but they should prioritize fixing this. It's a pretty important feature. – Magnus Apr 06 '23 at 20:00
  • 1
    I agree. Thanks for sharing that link. I was about to try the workaround and noticed that Next has just released v13.3.0. I've updated to this version and it seems to have resolved the caching issue. I'll leave this as an answer below. – Brendan Apr 08 '23 at 07:16

1 Answers1

2

This seems to be an issue with certain versions of Next 13 while deployed on Vercel. In my case, I was running v13.2.4.

Next has just released v13.3.0 which seems to have resolved this caching issue.

Updated using npm:

npm install next@13.3.0 --save

Release link: https://github.com/vercel/next.js/releases/tag/v13.3.0

Brendan
  • 834
  • 1
  • 9
  • 20