Search code examples
next.jsvercel

Vercel serving stale version of static files, after rebuild

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)
Solution

  • 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 [email protected] --save

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