zoukankan      html  css  js  c++  java
  • React 应用的 Nginx 缓存控制

    典型 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 可以设置缓存控制头
  • 相关阅读:
    Pycharm的快捷键
    【Python】笔记1:Spyder常用快捷键
    npm常用命令整理
    MVC4 IIS7.5 403.14错误的解决办法
    AO 获取系统自带的工具条
    CentOS 7.3下安装Redis
    CentOS 7.3下安装MySql
    安装sql server 2005时出现“安装汇编”错误的解决办法
    解决IIS下localhost访问需要输入用户名和密码的问题
    不断沟通,反复确认
  • 原文地址:https://www.cnblogs.com/chanvin/p/cache-control-for-react-app-with-nginx.html
Copyright © 2011-2022 走看看