Search code examples
reactjsazurecachingcloudflareazure-cdn

Caching problem on Azure CDN + Cloudflare structure


Our site is being made available with the following structure: Static Blob Container Azure > CDN > Cloudflare > User.

The React app build is made available in an Azure Static Blob Container that is accessed by an Azure CDN. When we access the app via the CDN URL, we never have a cache problem. We also use cloudflare to manage the DNS and supposedly improve the cache. But when we access the app through cloudflare, we have a serious cache problem, returning extremely old versions for users who have accessed the site before.

Even after turning off all cache options available in Cloudflare's dashboard and its graphics show that cache consumption has dropped, the bug still persists. We were unable to identify where our problem is in the structure mentioned above.


Solution

  • The problem is because a CDN uses multiple nodes to serve the content. The proper way to 'solve' this is appending a version in the filename or path, this way, whenever you need to change something, the CDN will download the latest version. Just using a regular 'app.js' is not enough.

    More info:

    How to force the browser to reload cached CSS and JavaScript files

    https://stackoverflow.com/a/34604256/1384539