Caching issue with Next.js App Router - Vercel Deployment

Hey everyone,

The Next.js team has said that some of these issues might be fixed in their forthcoming 14.0.4 release. If you'd like, you can try installing the canary version to see if that helps:

npm install next@canary

Otherwise, you can wait until that version has been released and then upgrade.

If anyone tries this out, please let us know if it helps.

Sam

Hello everyone!

I wanted to join the conversation as I built the Prismic website using Next.js.

I've encountered similar issues as all of you have reported after migrating to app router. I've tried various solutions over the past few months.

However, since version 14.0.2, we haven't experienced any problems with revalidateTag() not revalidating.

The only unconventional setup we still have in place is VERCEL_FORCE_NO_BUILD_CACHE=1. As Nathan mentioned earlier, this is used to opt out of Vercel's build cache. We use it because when we trigger deploys from code changes in Git, we sometimes get outdated content if we've made content changes since the last build. It's not ideal since it doubles the build time, but now that revalidateTag() is working, our site doesn't need to rebuild as often.

Since version 14.0.4 has been released, it's possible that this issue has been fixed, as the update promises to resolve many caching issues. We're currently on the latest version, but we haven't had the chance to remove VERCEL_FORCE_NO_BUILD_CACHE=1 and test it yet.

Are any of you experiencing problems on version 14.0.4?

Samuel

I have updated to version 14.0.4, and the cache issues have disappeared

2 Likes

That's wonderful news! Thank you for letting us know. :pray:

Did you disable the build cache with VERCEL_FORCE_NO_BUILD_CACHE=1 earlier because of deploying outdated caches? If so, have you attempted to remove it as well?

Samuel

No, I did not use VERCEL_FORCE_NO_BUILD_CACHE

This is still not working in Next 14.0.4 for me. I have a simple Server Component page with export const revalidate = 120; And the data fails to refresh after build. I am seeing error logs with F [Error]: Ref not found. Ensure you have the correct ref and try again. Master ref is: ZXjLpxEAACIAKO1b
at N.fetch (/var/task/apps/web/.next/server/chunks/156.js:1:12940)...

1 Like

Any update on this I've been digging this for past week

Hi John,

Can you give me more detail on what you've tried and what you're seeing with your Next.js build in Vercel?

Thanks.

I was able to solve the "[Error]: Ref not found." issue by using an access token.

Agreed. I resolved the reference errors by adding an access token. However, in reality, this should not be necessary.

I tried solving it using the docs, but it is still there. Wondering if you can share what exactly you did? Thank you

I was also having this issue even with access token and next 14.0.4. Specifically I was having this issue with API routes which I'm using to update my search index when documents are published/deleted.

I'm pretty sure it's due to the default createClient function having "force-cache" which resulted in all routes, even API POST routes (which are supposed to avoid caching as far as I understand) having Next.js fetch caching forced.

I resolved this on my project by adding

export const fetchCache = 'force-no-store'; to the top of each API route that I wanted to avoid caching.

I also have export const revalidate = 0; in my routes, but I'm pretty sure only the fetchCache export is required to fix.

Here are some more relevant options that may be useful for people who still have issues with this as there are a lot of different ways to control caching per route.

2 Likes

I had the same issue and VERCEL_FORCE_NO_BUILD_CACHE=1 worked for me. What's the specific reason this works? Would love to know how this actually works and why this is the solution