首页 > 其他 > 详细

React 应用的 Nginx 缓存控制

时间:2021-05-30 10:53:15      阅读:8      评论:0      收藏:0      [点我收藏+]

典型 React 应用面临的缓存问题,可通过 Nginx 配置进行解决

通用部署

构建应用后,只需使用 Nginx 指向静态文件即可

server {
  listen 80;
  root /PATH/TO/APP/build;
  try_files $uri $uri/ /index.html;
}

缓存问题

第一次请求页面的时候,所有页面和资源都是从服务器返回的,如下图所示:

技术分享图片

关闭浏览器,重新打开,输入网址,按下Enter,浏览器会从本地缓存获取文件,如下图所示:

技术分享图片

即使在以上两次请求之间,页面已更新,浏览器也不会从服务器重新获取更新,因为 disk cache 并没有和服务器进行任何通信

解决思路

如果资源文件有更新,其文件名就会更新,所以资源的缓存不是问题,只需禁用页面的缓存即可

即把以上的

  try_files $uri $uri/ /index.html;

替换为

  location / {
    if ( $uri = ‘/index.html‘ ) {
      add_header Cache-Control no-store always;
    }
    try_files $uri $uri/ /index.html;
  }
  • 因为所有的页面最终都指向入口文件,所以其实际的 $uri 都是 /index.html
  • no-store 是最严格的 Cache-Control 禁用缓存的值,确保浏览器不使用任何缓存
  • 因为 add_header 连带 if 不能直接在 server 下,所以加了一层 location

解决效果

这样第二次请求页面时,页面本身不会缓存,但是资源如果没有改变就会缓存,如下图所示:

技术分享图片

可以访问以下地址,尝试操作,并查看对应的网络请求:

http://react.chanvinxiao.com

总结

  • 浏览器输入地址按 Enter 会出现奇怪的缓存问题
  • 通过 Nginx 的 $uri 可以判断请求是否为页面
  • 通过 Nginx 的 add_header 可以设置缓存控制头

React 应用的 Nginx 缓存控制

原文:https://www.cnblogs.com/chanvin/p/cache-control-for-react-app-with-nginx.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!