Cache busting with CRA React

Question

When I updated my site, run npm run build and upload the new files to the server I am still looking the old version of my site.

Without React, I can see the new ver

Answer 1

As mentioned by some of the previous answers here, both the service worker and the (lack of) cache headers can conspire against you when it comes to seeing old versions of your React app.

The React docs state the following when it comes to caching:

Using Cache-Control: max-age=31536000 for your build/static assets, and Cache-Control: no-cache for everything else is a safe and effective starting point that ensures your user's browser will always check for an updated index.html file, and will cache all of the build/static files for one year. Note that you can use the one year expiration on build/static safely because the file contents hash is embedded into the filename.

As mentioned by @squarism, older versions of create-react-app defaulted to opt-out of service worker registration, while newer versions are opt-in. You can read more about that in the official docs. It's quite a straightforward process to match you configuration to the latest template if you started with an older version of create-react-app and you want to switch to the new behaviour.

Related questions:

• How to avoid caching for create-react-app
• ReactJS: How to prevent browser from caching static files?
• how to clear browser cache in reactjs