Caching issue with Next.js App Router - Vercel Deployment

Developing with Prismic
,
1

Dear Prismic team

I set up a new Next.js App Router project using your setup command npx @slicemachine/init@latest and walking trough your step by step setup guide.

In previous versions, I never had issues deploying the site to Vercel and setting up Prismic Webhooks to trigger redeploys.

With this new project it seems like there are some caching issues with Vercel:
If I push a new commit to Github or if I edit content on Prismic, it triggers a new deploy correctly.
Unfortunately those deploys are missing the newest contents from Prismic and every then and now it appears the following error:

ForbiddenError: Access to this Ref requires an access token
    at Client.fetch (/vercel/path0/.next/server/chunks/734.js:2367:27)
    at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
    at async Client.get (/vercel/path0/.next/server/chunks/734.js:1450:16)
    at async Client.dangerouslyGetAll (/vercel/path0/.next/server/chunks/734.js:1515:28)
    at async Client.getAllByType (/vercel/path0/.next/server/chunks/734.js:1767:16)
    at async Object.generateStaticParams (/vercel/path0/.next/server/app/portfolio/[portfolio]/[uid]/page.js:536:19)
    at async buildParams (/vercel/path0/node_modules/next/dist/build/utils.js:917:36)
    at async /vercel/path0/node_modules/next/dist/build/utils.js:934:33
    at async /vercel/path0/node_modules/next/dist/build/utils.js:1067:117
    at async Span.traceAsyncFn (/vercel/path0/node_modules/next/dist/trace/trace.js:103:20) {
  url: 'https://my-repo.cdn.prismic.io/api/v2/documents/search?q=%5B%5Bat%28document.type%2C+%22project%22%29%5D%5D&pageSize=100&ref=ZLphbxEAACMAGdpk&routes=%5B%7B%22type%22%3A%22page%22%2C%22uid%22%3A%22home%22%2C%22path%22%3A%22%2F%22%7D%2C%7B%22type%22%3A%22page%22%2C%22path%22%3A%22%2F%3Auid%22%7D%2C%7B%22type%22%3A%22portfolio%22%2C%22path%22%3A%22%2Fportfolio%2F%3Auid%22%7D%2C%7B%22type%22%3A%22project%22%2C%22resolvers%22%3A%7B%22portfolio%22%3A%22portfolio%22%7D%2C%22path%22%3A%22%2Fportfolio%2F%3Aportfolio%2F%3Auid%22%7D%5D',
  response: {
    type: 'api_security_error',
    message: 'Access to this Ref requires an access token',
    oauth_initiate: 'https://my-repo.prismic.io/auth',
    oauth_token: 'https://my-repo.prismic.io/auth/token'
  }
}

In both cases I have to redeploy the site manually and force Vercel to not use the cache. If I do so, everything works fine.

Do you have any idea of how I can fix this?

In my prismicio.ts file I have the following recommended code which contains some lines about caching:

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

  prismicNext.enableAutoPreviews({
    client,
    previewData: config.previewData,
    req: config.req,
  });

  return client;
};

Thanks for your support.

2

Which version of Next are you using, a fix for a similar error was release a while ago: fix: use .mjs module exports by angeloashmore · Pull Request #111 · prismicio/prismic-react · GitHub

4

I use the following versions of probably relevant packages:

  • Next 13.4.12
  • @prismicio/next 1.3.3
  • @prismicio/client 7.1.0
  • @slicemachine/adapter-next 0.3.9
  • slice-machine-ui 1.7.1

And I use the new src directory of Next.js.

5

I ran into the same issue. Adding an access token solved it. More info on generating one can be found here: Access Token - Documentation - Prismic

  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: 5 } },
    ...config,
  });

In your .env.local and on Vercel add:
PRISMIC_ACCESS_TOKEN=YOUR_TOKEN

1 Like
6

Thanks for your answer.
Does this solve the content caching issue as well?

7

I was also having caching issues but realized that was my fault. I had set dynamicParams to false. Which I had done in my page.tsx:

export const dynamicParams = false;

Removing it solved that issue for me. You can read more about dynamicParams here: File Conventions: Route Segment Config | Next.js

8

I also use export const dynamicParams = false; in my page files.
But I guess, this makes sense as my pages only update when there is an update in the Prismic Repo - and if this is the case, it triggers a redeploy with a webhook.

If I understand it correctly, the dynamicParams setting only impacts routes and not content on those pages, and currently I have the issue that new routes and new contents (like a list of entities of a custom type) are missing out of builds.

dynamicParams = false is also included in the Page Snippet (in Slicemachine), so I guess this complies with the core Prismic concept?

9

Any idea on what the problem could be, @Pau or @angeloashmore?

11

I'm having the same issue here. I did the security token recommendation by @nathan and I don't understand what's going on.
I was seeing that issue and then changed the API access option to "open" and I was able to deploy successfully, however, if I make changes inside the primic interface such as changing text, it is not showing in my website as if I had a special cache configuration

1 Like
12

I reconfigured the webhook from vercel to prismic and it is now working as expected. So I guess that adding the accessToken and re-doing the webhook solved my problem. I hope that this can help you guys