Nextjs serving stale (old) fetch cache across network, how to clear cache?

We have a Nextjs site on Cloudflare using app router and server side rendering. It was created using this guide.

All data on the page is fetched remotely and we revalidateTag() to clear the fetch cache on demand. We’re not relying on any “build time” data from deployments.

We have noticed that this “kind of works” but with some scary side effects, the primary one being that old data is appearing every-now and then across various devices/browsers/locations.

Some examples:

  • If you visit the site from a new browser, upon first load you might get an old copy of the page (stale network cache perhaps).
  • If you do see old data and refresh the page you get new data, however if you then click to another page you get old data (stale router cache perhaps).
  • Sometimes revalidateTag just doesn’t work and the pages get stuck showing old data even when refreshing the page.

There are constant permutations of the above happening often and it’s hard to narrow down the cause.

What we’ve tried:

  • Cache rule is set up to “Bypass cache” for our domain (no Cloudflare CDN cache)
  • Pages > Settings > Build > Build cache is NOT enabled (no build cache)
  • We’re tried triggering a redeployment each time data is changed
  • We’ve tried manually purging cache after data is changed
  • Every page uses export const runtime = "edge";
  • Our fetch revalidation is set to revalidate: 300 (5 minutes), even after 5 minutes the old data is popping up.

Clutching at straws here since for the most part Cloudflare playing nice. It’s just that every-now and then really old data pops up which won’t be acceptable for our site.

Is there a reliable way to ensure that cache is properly purged across the Cloudflare network for a Nextjs app when data is changed?

It’s acceptable that data cache might take a few minutes to propagate across Cloudflare, however we’ve observed old home page data a full day after a change.

Is there a setting/config/strategy that we’re missing to make it more reliable?

Any insights or things to try would be hugely appreciated.

Update: After further debugging it seems the issues is related to location. Like fresh data not making it’s way to all Cloudflare rays after invalidation.

For example if I use a VPN for United States, make edits, followed by calling revalidateTag(), I can see the latest changes on the website. However my colleague in Australia sees old data, and it’s locked, even after hard refresh or waiting a few hours.

I’m hoping we’re missing something as this makes running a Nextjs SSR app on Cloudflare pages basically not viable.

Update: We’ve fully resolved this issue by adding the Workers KV caching solution outlined here. It’s very straight forward to do (took 2mins) and is a game changer and resolves all issues we were facing with old data hanging around or appearing randomly :raised_hands:

1 Like

Wow nice!! Thank you for sharing the right solution~

This topic was automatically closed 2 days after the last reply. New replies are no longer allowed.