Old cache mixes with the new one
Unanswered
Asari posted this in #help-forum
AsariOP
Hello. Our web app is built on Next.js 16.1 using the latest features (PPR, Server Actions, Cache Components, React Compiler, and others).
Development is going quite well—there are no real difficulties. I try to write clean code without outdated practices and I often cross-check the documentation.
We don’t use Vercel; we self-host our site in a Docker container. And we keep running into a problem I didn’t even know existed—cache mixing. Several times a week we roll out site updates, and after them, users who have visited the site before start getting client-side exceptions when navigating through the site via
We aren’t doing any weird header manipulations. We also set a random build id in
What am I missing? Weeks go by and the problem keeps bothering us, primarily affecting existing users. In incognito mode there are no issues.
Development is going quite well—there are no real difficulties. I try to write clean code without outdated practices and I often cross-check the documentation.
We don’t use Vercel; we self-host our site in a Docker container. And we keep running into a problem I didn’t even know existed—cache mixing. Several times a week we roll out site updates, and after them, users who have visited the site before start getting client-side exceptions when navigating through the site via
Link components. Updated pages may show old versions, and a full page refresh is required to fix it. Sometimes the updated HTML is rendered but the new styles aren’t applied.We aren’t doing any weird header manipulations. We also set a random build id in
next.config.ts and a constant server actions encryption key. We also don’t use caching on the edge (Cloudflare in our case)—just the default headers that Next.js generates.What am I missing? Weeks go by and the problem keeps bothering us, primarily affecting existing users. In incognito mode there are no issues.
17 Replies
Serengeti
Use this in your next.config.ts
import { defineConfig } from "next";
export default defineConfig({
experimental: {
optimisticClientCache: false,
},
});
Set prefetch={false} on links
Like this
<Link href="/about" prefetch={false}>About</Link>
let me know if this helps
import { defineConfig } from "next";
export default defineConfig({
experimental: {
optimisticClientCache: false,
},
});
Set prefetch={false} on links
Like this
<Link href="/about" prefetch={false}>About</Link>
let me know if this helps
@Serengeti Use this in your next.config.ts
import { defineConfig } from "next";
export default defineConfig({
experimental: {
optimisticClientCache: false,
},
});
Set prefetch={false} on links
Like this
<Link href="/about" prefetch={false}>About</Link>
let me know if this helps
AsariOP
Doesn't this get rid of the prefetching feature? It was supposed to improve page load speed when navigating the site. By doing this, I'll be disabling it 🤔
@Asari Doesn't this get rid of the prefetching feature? It was supposed to improve page load speed when navigating the site. By doing this, I'll be disabling it 🤔
Serengeti
Have you tried Deployment-aware client cache invalidation
?
If you don’t want to disable prefetching
@Saint Hubert Jura Hound What cache handler do u have defined in ur next config?
AsariOP
I didn't set up a custom handler. The default one is being used
@Asari I didn't set up a custom handler. The default one is being used
Saint Hubert Jura Hound
And do u only have 1 replica of the docker container?
@Saint Hubert Jura Hound And do u only have 1 replica of the docker container?
AsariOP
Yes, at the moment
Saint Hubert Jura Hound
Hm
Hang on
Saint Hubert Jura Hound
Idk it sounds more like a client side router cache or full route cache issue when u say it happens when navigating. Maybe read these again carefully since there are some edge cases that could cause improper invalidation
https://nextjs.org/docs/app/guides/caching
https://nextjs.org/docs/app/guides/caching
Other than that it might be more helpful if u show related code of pages where users are experiencing cache issues
@Saint Hubert Jura Hound Other than that it might be more helpful if u show related code of pages where users are experiencing cache issues
AsariOP
Okay, I’ll review the documentation again. But it seems like this is happening across the whole site, not just on specific pages.
We mainly use the "use cache" directive only for functions that fetch data (for example, user metrics on the dashboard, or site stats displayed on the main page)
We mainly use the "use cache" directive only for functions that fetch data (for example, user metrics on the dashboard, or site stats displayed on the main page)
If needed, I can provide a link to our website. That way you can check what headers NextJS generates.
Also, Cloudflare does cache /_next/static elements like
Also, Cloudflare does cache /_next/static elements like
/_next/static/chunks/x.js by default, without any custom rules. However, when there are code changes, the related hashes should change, which means the browser should download the new JS chunks, since new chunk files are specified in the HTML@Asari If needed, I can provide a link to our website. That way you can check what headers NextJS generates.
Also, Cloudflare does cache /_next/static elements like `/_next/static/chunks/x.js` by default, without any custom rules. However, when there are code changes, the related hashes should change, which means the browser should download the new JS chunks, since new chunk files are specified in the HTML
Saint Hubert Jura Hound
Indeed. I think the same goes for Images and Scripts. But sure idm checking out a link
@Asari Okay, I’ll review the documentation again. But it seems like this is happening across the whole site, not just on specific pages.
We mainly use the "use cache" directive only for functions that fetch data (for example, user metrics on the dashboard, or site stats displayed on the main page)
Saint Hubert Jura Hound
Yeah thats why i was thinking maybe there is some team-wide misunderstanding of cache components but im really not sure. Just trying to rule stuff out