Handling Caching and Undefined Variables after Rebuild in Nextjs

Question

I have a problem in Nextjs, so when I keep a page open and do a rebuild, then I go back to that page and click any of the links it shows an error of undefined variables. But if I reload the page it's fine.

So I checked the network tab in chrome developer tools, I noticed that when I click a link after a rebuild, it opens a JSON file but the response is still 200 even the file doesn't exist anymore due to the rebuild. So what happens, that JSON file returns an empty response which caused the undefined issue.

So I downgraded Nextjs to the last version it was working for us which is 13.4.8 to see how it works. So I clicked any of the links right after the rebuild and I see the JSON files are now returning 404 which is correct since they are now removed due to the rebuild.

I think this could be a client side caching issue, since I've heard a lot of it but there were no solutions.

How can address this issue?

Specs:

Nextjs: 14.1.0
Node: v19.9.0

Things I've tried:

1. cacheMaxMemorySize: 0, // disable default in-memory caching
2. { cache: 'no-store', next: { revalidate: 0 } } // set fetch not to cache
3. prefetch={false} // disable prefetching in Links

But no luck, I'm still having the issue.

My current solutions:

1. Force old assets to return 404 via Nginx, but I have to add the assets to the rule on every build.
2. Force reload the page when it returned an undefined error using the ErrorBoundary.
3. Revert to old version which is Nextjs 13.4.8.

I'm hesitant to select any of these options, but if there's no other solutions I may have to pick one.