Old cache mixes with the new one

[tepid geyser]

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 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.

[naive anchor]

Post created!

🔎 This post has been indexed in our web forum and will be seen by search engines so other users can find it outside Discord

🕵️ Your user profile is private by default and won't be visible to users outside Discord, if you want to be visible in the web forum you can add the "Public Profile" role in id:customize

✅ You can mark a message as the answer for your post with Right click -> Apps -> Mark Solution
(if you don't see the option, try refreshing Discord with Ctrl + R)

[soft remnant]

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

[tepid geyser]

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 🤔

[soft remnant]

Have you tried Deployment-aware client cache invalidation

?

If you don’t want to disable prefetching

[sterile plover]

What cache handler do u have defined in ur next config?

[tepid geyser]

I didn't set up a custom handler. The default one is being used

[sterile plover]

And do u only have 1 replica of the docker container?

[tepid geyser]

Yes, at the moment

[sterile plover]

Hm

Hang on

[sterile plover]

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

Other than that it might be more helpful if u show related code of pages where users are experiencing cache issues

[tepid geyser]

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)

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

[sterile plover]

Indeed. I think the same goes for Images and Scripts. But sure idm checking out a link