Next.js 14 App Router经CloudFront代理后总是强制刷新的问题及解决

问题场景 #

使用Next.js 14 App Router开发的应用，部署在CloudFront代理之后出现异常：无论是否使用Next.js内置的Link组件进行页面跳转，页面都会触发强制刷新。对比本地/开发环境（不经过CloudFront代理）的请求响应，发现两者的Vary头部内容存在差异。此前尝试在CloudFront中配置策略以传递预期的Vary头部，但未解决问题。

解决方案 #

通过在CloudFront中添加缓存策略，明确允许请求和响应均携带所需的Vary头部值，成功解决了页面强制刷新的问题。

内容的提问来源于stack exchange，提问作者Ronak