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