HTTP 标头“cache-control: s-maxage=31536000, stale-while-revalidate”是如何工作的？

Question

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

Answer 1

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

正如您的问题所暗示的，它们可以用逗号分隔以实现您想要的caching strategy。

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

第一个值 (s-maxage) 是以秒为单位缓存对象的时间。它还“覆盖 max-age 或 Expires 标头，但仅适用于共享缓存（例如代理）并且被私有缓存忽略” - 请参阅 HTTP expiration

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

---

示例

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

---

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

这是我制作的related post，它突出显示了 Next.js 中的 ISR 流程。