跳到主要内容

缓存优化

  • ISR缓存如何配合CDN缓存
  • ISR缓存和CDN缓存一般设置多长时间
  • s-maxage缓存时间设置多久
  • s-maxage、stale-while-revalidate配置
    • CDN缓存
    • 降低回源压力、提升 TTFB

ISR缓存配合CDN缓存​

  • ISR 管“页面多久重新生成一次”，CDN 缓存管“这份页面多久直接从边缘返回”。
js
'/': {
      isr: 1800, // 缓存半个小时
      headers: {
        'Cache-Control': 'public, max-age=60, s-maxage=1800, stale-while-revalidate=1800'
      }
    },

注意配置：

  • 浏览器短缓存，CDN 长缓存。
  • max-age=60 是给浏览器看的
  • s-maxage=1800 是给CDN / 共享缓存看的

响应头Cache-Control配置​

s-maxage理解​

  • s-maxage 表示共享缓存“多久
    • s可以理解为 share 共享
  • s-maxage用于CDN缓存, 因为CDN就是共享层，很多用户共享同一份 CDN 缓存
    • 对于同一个节点、同一个URL，这些用户都是用的同一份缓存

stale-while-revalidate理解​

  • 当缓存过期后，允许先返回旧内容，同时后台去源站拉新内容刷新缓存。

缓存响应头相关​

  • Age
  • max-age
  • s-maxage
  • stale-while-revalidate
响应头 / 指令作用对象含义常见用法易错点
Cache-Control: max-age=秒数浏览器 + 共享缓存指定新鲜期，在这段时间内可直接使用缓存max-age=60、max-age=600不是只给浏览器用；如果没有 s-maxage，CDN 也可能按它走
Cache-Control: s-maxage=秒数共享缓存（CDN / 代理）指定共享缓存的新鲜期，优先级高于 max-agemax-age=60, s-maxage=300浏览器不看它
Age: 秒数共享缓存返回时附带表示当前缓存对象已经缓存了多久Age: 197不是缓存策略时间；它是状态值，不是配置项
Cache-Control: public浏览器 + 共享缓存明确允许共享缓存存储该响应公共页面、公共 API、静态资源不是“强制缓存”，只是“允许被共享缓存”
Cache-Control: private浏览器允许浏览器缓存，但不允许共享缓存缓存用户中心、订单页不是“不缓存”
Cache-Control: no-cache浏览器 + 共享缓存可以存，但每次使用前必须去源站验证HTML、个性化但想协商缓存的接口最容易误解；它不是“不缓存”
Cache-Control: no-store所有缓存完全不允许缓存和存储支付页、敏感信息这个才是真正意义上的“不缓存”
Cache-Control: must-revalidate浏览器 + 共享缓存过期后必须重新验证，不能随便继续用旧副本强一致性要求较高的内容常与 max-age 一起用，而不是单独使用
Cache-Control: stale-while-revalidate=秒数主要是共享缓存，也可能浏览器支持过期后一段时间内可先返回旧内容，同时后台刷新CDN 缓存 HTML、ISR 场景不是所有环境都完全一致支持
Cache-Control: stale-if-error=秒数主要是共享缓存当源站报错时，允许继续返回旧缓存一段时间提升可用性只在错误场景兜底，不是正常更新策略
ETag浏览器 + 共享缓存协商资源版本标识，用于协商缓存ETag: "abc123"它本身不决定缓存多久，只决定如何验证是否变化
Last-Modified浏览器 + 共享缓存协商资源最后修改时间，用于协商缓存Last-Modified: Thu, 26 Mar 2026 07:00:00 GMT精度通常不如 ETag
Expires浏览器 + 共享缓存指定绝对过期时间老系统兼容现代场景优先看 Cache-Control

如何理解“浏览器短缓存，CDN 长缓存​

浏览器短缓存​

  • 表示浏览器 60 秒内可直接用本地缓存。
  • 浏览器过了 1 分钟后，会重新请求；这个请求通常先到 CDN，再由 CDN 决定是否回源，如果CDN缓存过期了，则回源站到服务器获取新的资源，如果没过期，则直接获取CDN缓存
js
max-age=60

浏览器短缓存为什么短？

因为浏览器缓存是“单用户本地缓存”，有几个特点：

  • 一旦缓存住，用户刷新都可能还拿旧内容
  • 难以统一控制
  • HTML 页面变化时，用户本地容易滞后
  • 用户手动强刷前可能一直看旧页面

所以浏览器缓存 HTML 一般不配太长。

CDN长缓存​

  • 表示 CDN 边缘节点可缓存 30 分钟。
ts
s-maxage=1800

为什么 CDN 可以更长？

因为 CDN 是可控的共享层：

  • 命中率高，能显著减少回源
  • 可统一失效、刷新、清理
  • 配合 stale-while-revalidate 可以平滑更新
  • 即便缓存久一点，也比用户本地缓存更可运维

浏览器缓存​

  • 提高js/css的缓存, 提升页面加载速度
  • 设置强缓存
bash
Cache-Control: public, max-age=31536000, immutable