Nextjs build 之后首页的 header 有 s-maxage: 31536000 字段的疑惑

[FaiChou]

s-maxage 字段会让缓存服务器进行缓存处理，31536000 会让缓存服务器缓存 1 年。

如果将 nextjs 部署在服务器上，使用 nginx 转发之后，如果 nginx 开了缓存。那么 1 年后会过期。

并且是首页信息，不仅仅是静态资源。

这样会有一个问题，没有办法发布新版本了，因为请求都被缓存命中。除非手动清楚缓存。

我昨天还以为是 cloudflare cdn 的缓存，清理后也没有效果。最后才发现是 nigix 的缓存。

[fuzzsh]

https://nextjs.org/docs/app/api-reference/config/next-config-js/headers#cache-control

为什么不觉得是 Nextjs 问题🐕

前端不是 SSR 结构直接 build 出来 html 多省事，多跑个服务徒增卸锅难度

[FaiChou]

@fuzzsh
不确定咱俩讨论的是不是同一个问题。我说的问题是**首页**也有这个 cache 字段，而不仅仅是静态资源。静态资源比如 js 或者 css 文件这样缓存没问题，但是首页这样缓存就危险了。如果 Nginx 有缓存，那么下次发版，必须清空缓存才能刷新出来新版本。

[FaiChou]

@fuzzsh 有一点奇怪，build 之后自己跑 npm start ，会有这个 `s-maxage: 31536000` 缓存头。但是部署到 vercel 自己的服务上，就没有这个 `s-maxage: 31536000` 头。

只能说 vercel 自己的服务器处理过这个请求头。

所以自己要用 Nginx 转发 nextjs 这个服务的话，也需要把这个 s-maxage 头给抹掉。

[zed1018]

我看了下我这 self-host 的 nextjs 项目，首页也有这个头。但是实际上并不影响发版。因为缓存并不是一个头控制的，比如 Etag 等，都会控制或者无效化缓存。

[fuzzsh]

https://nextjs.org/docs/app/building-your-application/caching
你看下缓存机制就懂了

不动代码也可以在 nginx 去掉这个 cache-control ，不让 client-side 缓存

[FaiChou]

@fuzzsh #5 这个 s-maxage 缓存是让 proxy/cdn 的缓存策略，和 client-side 没关系。你没懂题目意思。

https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Cache-Control

> The s-maxage response directive indicates how long the response remains fresh in a shared cache. The s-maxage directive is ignored by private caches, and overrides the value specified by the max-age directive or the Expires header for shared caches, if they are present.

[FaiChou]

@fuzzsh #5 “不动代码也可以在 nginx 去掉这个 cache-control ，不让 client-side 缓存”，是的，我在 3L 的回复中也说了，要在 nginx 中手动去掉这个 cache-control 请求头。

[FaiChou]

@zed1018 ETag 或者 max-age 过期了只是客户端会重新去服务器重新获取新资源，但是服务器可能是 cdn 服务器，这些 cdn 上面也有缓存，s-maxage 是控制这些 cdn 服务器上缓存过期的功能。所以 cdn 服务器本身还是会返回老数据（缓存没过期）。

[zed1018]

@FaiChou #8 https://developers.cloudflare.com/cache/reference/etag-headers/
这取决于 CDN ，有的 CDN 是支持 Etag 去 validate 资源的

[cs3230524]

我前几天也遇到了，找了半天问题。只能不让容器缓存，去掉 nginx 相关代码。保留客户端让浏览器自己处理缓存。