ReactJS: How to prevent browser from caching static files?

Question

I'm working on my project using ReactJS and I use create-react-app to create my app. After building project, I use my server to serve the build folder. And when I update my app, the browser of user still uses the old version of my app because it caches the static files (js, css). So is there any way to prevent browser from caching static files ? Thank you !

Answer 1

TLDR: You will want to send caching instructions via HTTP headers.

The Cache-Control header has several directives to control cache behavior, expiration, and validation.

Cache Behavior: https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Cache-Control

Cache-Control: public resource can be cached by any cache

Cache-Control: private resource can only be cached by the browser

Cache-Control: no-store Sets the browser to always request the resource from the server

Cache-Control: no-cache This tells the browser to cache the file but not to use it until it checks with the server to validate we have the latest version. This validation is done with the ETag header. (https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/ETag)

Answer 2

Create react app provides service worker and this caches the various files on the client side. If you want you can unregister the service worker. But please note that you will not be able to serve your app in offline mode as in PWA's