Next.js Vercel revalidation error

Developing with Prismic
1

I had the same issue on a large website today. I had to go to Vercel - click on the website - settings and then purge the cache. Please note that re-deployment did not fix the issue.

It doesn't matter if the cache is reinvalidated via API, it seems like Prismic is caching something else that gets stuck in the /.next cache, that is related to the master ref.

Any clue what it might be, and why the master ref keeps changing from time to time which breaks things?

2 Likes
2

Hi @icewolfy ,

I've recently made a troubleshooting document for this here:

Can you try those options?

The master ref changes when your content is updated.

You can see your latest ref by hitting:
https://your-repo-name.cdn.prismic.io/api/v2

And your latest content in the API browser at:
https://your-repo-name.prismic.io/api/v2

3

Hi @Phil ,

I'm using the apiEndPoint defined in slicemachine.config.json which is https://perlan.cdn.prismic.io/api/v2

I also have on-demand revalidation configured with tags:

when I call client.getSingle I pass this config when fetching pages:

    fetchOptions: {
      next: {
        tags: [uid || `frontpage-${locale}`],
      },
    },

the createClient function uses this by default if I don't override the fetchOptions:

{ next: { tags, revalidate: 60 * 60 * 2 } }

Could it be that createClient caches the response from the API endpoint in NextJS, causing it to fetch outdated ref? I went through your troubleshooting article, but it didn't discuss this issue.

4

I looked into the /.next/cache/fetch-cache folder which has various files made for each request, and each file contains the fetch request made for the page and it includes the master ref in the URL.

If the fetch request for the page is cached, then NextJS should just get the data from cache and make no API call to Prismic (even if the master ref has changed), which is all fine.

So lets say the page is reinvalidated, that file should disappear based on the tag or reinvalidation time, and NextJS should make a new request to fetch the page. I assume it will re-fetch https://perlan.cdn.prismic.io/api/v2 to get a new master ref? If not, then that would be a problem.

I'm trying to figure out why the issue started happening out of the blue, since the website has been running for several months without any issues, and reinvalidation has worked like magic.

Thanks.

5

Hmm, so does createClient actually make an API call to fetch the master ref, and if I have cache set, e.g.

const client = prismic.createClient(sm.apiEndpoint, {
    routes,
    fetchOptions: {
        next: { tags: ['client'] }
    }
});

and later in the code I would do:

const articles = await client.getAllByType("article", {
    fetchOptions: {
        next: {
          tags: ["other_tag"],
        },
    }
}

And then lets say I reinvalidate the tag other_tag, would that then cause an issue where the master ref is stale?

6

I'm a bit unclear about your set-up.

Do you have caching set up in your application?

Can you provide a full explanation of your data queries and relevant settings? As much information as possible will really help. A link to your project on Github would be perfect.

7

What Next.js version are you on?
Apparently v14.2.7 had some fix to cache: Ensure fetch cache TTL is updated properly by ijjk · Pull Request #69164 · vercel/next.js · GitHub
So perhaps you could start from here.

I had the same issue couple of weeks ago, popped out of the blue for our big website.

I added access token (Access Token - Documentation - Prismic) and upgraded Next to latest and so far it's not happening. And I really really hope it won't. :crossed_fingers:

1 Like
8

I haven't encountered any issues after upgrading to the latest NextJS. I also stopped using revalidation and only using tags for now.