Inconsistent caching with revalidateTag() and Vercel Data Cache

[angeloashmore]

Hi Vercel team,

I’m Angelo from Prismic. I maintain Prismic’s Next.js integration.

We and our customers are having trouble with the App Router’s fetch() cache. We are hoping we could get some help from you.

Since we provide detailed recommendations around how to use Vercel with Next.js + Prismic sites, we want to make sure we are giving correct information.

Despite what we believe to be a correct cache and revalidateTag() setup, websites will sometimes display stale fetch() data or throw 500 errors related to pageData being undefined.

The issues only appear when deployed to Vercel, not locally.

We believe the Vercel Data Cache and/or revalidateTag() is not working as expected.

Deploys can be fixed by purging the Vercel Data Cache and redeploying. However, developers expect a hands-off deploy when using continuous deployment services like Vercel. We prefer not recommending workarounds.

Our recommended Next.js setup

We recommend (and automate the set up of) the following setup, which is designed to prefer static rendering:

• Query the Prismic API using a client that uses fetch(). The cache is configured differently in development and production:

  fetch(
      "some-url",
      process.env.NODE_ENV === "production"
        ? {
            next: { tags: ["prismic"] }, // To allow for clearing the cache.
            cache: "force-cache",        // To build static pages.
          }
        : {
            next: { revalidate: 5 },     // To develop with fresh content.
          },
    );

• Set up a route handler that calls revalidateTag("prismic") to invalidate all Prismic network requests.

• Configure a Prismic webhook that calls that route handler when content in Prismic changes.

What we expect to happen

• In development, we expect that developers can develop their websites with the latest content. Content should not be cached for more than 5 seconds (except the router cache, which can be cleared by refreshing the page).

• In production, we expect that developers can build their Prismic-powered pages statically for the best performance. All content should be cached until invalidated. Content can be invalidated by Prismic via a webook and revalidateTag() when content is published in Prismic.

What actually happens

• In some instances—but not all, despite no code changes—content is not properly invalidated: stale content appears on the page.

• After calling revalidateTag(), HTTP 500 errors related to undefined page data are thrown when visiting some pages (see vercel/next.js#47805).

• Rebuilding from a GitHub webhook (e.g. push) triggers a Next.js rebuild. Stale content is displayed, likely sourced from the last time the website was built (rather than sourced from the Vercel Data Cache).

See the following related threads:

• [WORKAROUND] Vercel deployment / build pipeline using filesystem cache handler, not Vercel Data Cache #56370
• Error: invariant: Expected pageData to be a string for app data request but received undefined. This is a bug in Next.js. #47805

Questions

• Is the above recommended fetch() set up correct for our goals?
• Can the Vercel Data Cache be purged programmatically? For example, at the start of a fresh build?
• Is any work being done to make revalidateTag() and the Vercel Data Cache more reliable?

[roux1max]

Hi @angeloashmore !
If I can just add a little something on your description of the issue: it happens for me even if the Next.js app is not deployed on Vercel so not sure if it is linked to Vercel rebuild or Prismic client caching mechanics.
It also seems to me that calling the revalidate route manually instead of through the webhook correctly invalidates the cache (or maybe it's just random).

[louisthomaspro]

Same issue: #55960

[jasonfarrell]

Looks like it may be fixed in 14.0.4: #55960 (comment)

[benjitastic]

We are still seeing intermittent stale cache on next 14.1.0 even after calling revalidateTag. Not sure how to reproduce or what the rhyme or reason is but some of our fetch request show new data after calling revalidateTag and others don't until manually purging the data cache.

[raRaRa]

Same issue is happening to me. It would be great if we could fetch data with an outdated master ref. Stale data would be much better than an error. My setup is NextJS App Router + cache with tags & reinvalidate time.

In my case this seems to happen almost every time someone publishes pages in Prismic. I use revalidateTag and can confirm that it´s being called, but for some reason the request to the repo is cached. Really annoying issue :(

[dogfrogfog]

consider updating to the 14.2.7 version, is has some cache fixes (#69164)

[grahamd711]

@angeloashmore we are having the same issue, but on Netlify deployments. We have tried all remedies including access token, revalidate Webhook, etc.

Is there any further information on a fix for this? It seems to a Prismic issue, not unique to Vercel.