http - HTTP header "cache-control: s-maxage=31536000, stale-while-revalidate"是如何工作的？

Question

我在我的项目中使用 NextJS。对于每个页面请求，它都会添加“s-maxage=31536000，stale-while-revalidate”缓存控制规则作为响应。这 2 条规则应该如何协同工作？

Answer 1

s-maxage 和 stale-while-revalidate 是 cache-control 的一部分 HTTP header standard指示缓存 Web 对象。

正如您的问题所暗示的那样，允许将它们以逗号分隔以实现您想要的 caching strategy .

Cache-Control: s-maxage=1, stale-while-revalidate=60

第一个值 (s-maxage) 是对象应该缓存多长时间，以秒为单位。它还“覆盖 max-age 或 Expires header ，但仅适用于共享缓存(例如，代理)并且被私有(private)缓存忽略” - 参见 HTTP expiration

第二个值(stale-while-revalidate)，if supported , 是在 s-maxage 到期后对象可以缓存多长时间，直到需要从您的站点再次请求它。

---

例子

• 初始请求 - 使用上述 cache-control 指令缓存内容
• 在初始请求后 1-60 秒之间请求 - 显示缓存的内容 - 在后台重新验证
• 在初始请求后 60 秒或更长时间请求 - 让浏览器请求提供新版本的内容。

---

这里是如何设置caching headers in Next.js .

这是一个related post我在 Next.js 中突出显示了 ISR 过程。