Cache Problem with Next.js on Vercel

Developing with Prismic
1

I have a caching problem with fetching the latest data from Prismic. I'm using Next.js App Router.

When running next build locally it doesn't fetch the new data from the Prismic Slices. My solution was to run "rm -rf .next/cache/fetch-cache && next build" as the build scripts. This works locally. But when running this script in production on Vercel I still got the old data fro Prismic.

Is anyone running into the same problem on Vercel?

1 Like
2

Hey @marvin.bernd,

What version of Next.js are you using? We had some caching problems last year around Next 13. You could look through this thread to see if there are any helpful workarounds:

Sam

3

Hey @samlittlefair, thank you for your quick response!

I'm using Next 14.2.3. I already tried some solutions from this thread. And running "rm -rf .next/cache/fetch-cache" seems working locally. So I think it is more a Vercel problem. The only solution on Vercel was to click on the Button "Purge Everything" in the Data Cache Section of the Project Settings.

I actually have another Prismic and Next Project running on Vercel. And here it seems everything fine, even without clearing the cache folder. The only difference is that the other project uses mainly Server Components and this project (with the caching problem) is using mainly Client Components.

6

I got it working by changing

export const createClient = (config: prismicNext.CreateClientConfig = {}) => {
  const client = prismic.createClient(repositoryName, {
    routes,
    accessToken: process.env.PRISMIC_ACCESS_TOKEN,
    fetchOptions:
      process.env.NODE_ENV === 'production'
        ? { next: { tags: ['prismic'] }, cache: 'force-cache' }
        : { next: { revalidate: 0 } },
    ...config,
  })

to

        ? { next: { tags: ['prismic'], revalidate: 0 } }
        : { next: { revalidate: 5 } },
1 Like