ReactJS: How to prevent browser from caching static files?

走远了吗. 提交于 2020-01-02 05:24:11

问题


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 !


回答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)




回答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



来源:https://stackoverflow.com/questions/51524633/reactjs-how-to-prevent-browser-from-caching-static-files

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!