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

Question

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

Answer 1

s-maxage并且是指示缓存 Web 对象的HTTP 标头标准stale-while-revalidate的一部分。cache-control

正如您的问题所暗示的那样，它们可以用逗号分隔以实现您想要的缓存策略。

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

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

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

---

例子

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

---

这是在 Next.js 中设置缓存标头的方法。

这是我发表的一篇相关文章，重点介绍了 Next.js 中的 ISR 流程。