如何在Angular服务端渲染应用中有效实现缓存失效？

核心问题本质 #

你碰到的缓存失效不生效，核心原因是静态资源的哈希机制已经生效，但入口文件index.html被浏览器/CDN缓存，或者SSR、ServiceWorker的配置没跟上，导致用户加载不到最新的资源引用链接。

具体修复步骤 #

1. 修正构建命令的笔误 #

看你package.json里的build:client-and-server-bundles:outhashall命令：

"build:client-and-server-bundles:outhashall": "ng build --prod --output-hashing=all && ng run sample-project:server:production --bundleDependencies all"

这里的sample-project是笔误，应该改成你的项目名myapp，否则服务端构建会用错配置，导致SSR渲染出的页面还是指向旧资源。

2. 强制index.html不被缓存 #

--output-hashing=all只会给JS、CSS等静态资源加哈希，但如果index.html被缓存，用户还是会加载旧的入口文件，引用旧的哈希资源。必须在服务器配置里给index.html设置严格的禁缓存策略：

• Nginx 配置示例：

location = /index.html {
    expires -1;
    add_header Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate";
}

• Apache 配置示例：

<Files "index.html">
    Header set Cache-Control "no-store, no-cache, must-revalidate, proxy-revalidate"
    Header set Expires "Thu, 01 Jan 1970 00:00:00 GMT"
</Files>

3. 调整ServiceWorker缓存策略 #

你已经启用了ServiceWorker（angular.json的production配置里serviceWorker: true），SW的缓存机制可能会卡住旧资源，需要做两点调整：

• 确保ngsw-config.json的配置正确，让SW能识别资源更新：

{
  "index": "/index.html",
  "assetGroups": [
    {
      "name": "app",
      "installMode": "prefetch",
      "resources": {
        "files": [
          "/favicon.ico",
          "/index.html",
          "/*.css",
          "/*.js"
        ]
      }
    }
  ]
}

• 在应用启动时主动检查SW更新，给用户提示：
  在app.component.ts中添加代码：

import { SwUpdate } from '@angular/service-worker';

constructor(private swUpdate: SwUpdate) {
  if (swUpdate.isEnabled) {
    swUpdate.checkForUpdate().then(() => {
      swUpdate.available.subscribe(() => {
        if (confirm('新版本已发布，是否刷新页面？')) {
          window.location.reload();
        }
      });
    });
  }
}

4. 确保SSR构建的一致性 #

SSR构建时，客户端和服务端必须用同一套production配置：
你的angular.json里，服务端的production配置outputHashing设为media是合理的（服务端bundle不需要给客户端引用），但构建命令要确保两端都用production配置，建议把package.json里的build:ssr改成：

"build:ssr": "ng build --configuration=production && ng run myapp:server:production"

5. CDN缓存检查（如果使用） #

如果用了CDN，要给带哈希的静态资源设置长期缓存（比如1年），给index.html设置不缓存或短缓存，发布新版本后手动刷新CDN的index.html缓存。

验证方法 #

发布新版本后，打开浏览器开发者工具：

1. 看Network面板，确认index.html的响应头Cache-Control是no-store类的禁缓存配置
2. 检查JS/CSS文件名是否带有新的哈希值
3. 若用了ServiceWorker，在Application面板的Service Workers里看是否有更新提示

内容的提问来源于stack exchange，提问作者Amir Dora.