博客缓存与音乐播放问题总结
一、问题现象
问题 1：浏览器缓存旧页面
现象：更新博客源码并构建后，电脑端第一次打开博客显示旧页面，刷新后才显示新页面（经过CDN加速的网址）
手机端：正常，不会出现旧页面
问题 2：音乐播放中断
现象：首页播放音乐后，点击其他子页面音乐中断
特殊情况：所有页面都点过一遍后，再切换页面音乐不会中断
关键发现：直接访问源站音乐不会断，通过 CDN 访问才会断
二、问题分析
缓存策略冲突
Next.js 和服务器返回了两个冲突的缓存头，CDN 优先使用了缓存策略，导致 HTML 页面被缓存。
ESA 协商缓存
即使移除了缓存头，ESA 仍然返回了 ETag，导致浏览器使用本地缓存的页面，Next.js 客户端路由无法正常工作。
三、解决方案
方案 1：修改 Nginx 配置（服务器端）
关键配置：
使用 proxy_hide_header Cache-Control 移除上游的缓存头
添加 no-cache, no-store, must-revalidate 禁止缓存
静态资源单独配置长期缓存
方案 2：修改 Next.js 配置（源码端）
关键配置：
为所有页面路由添加禁止缓存的头
为静态资源添加长期缓存的头
方案 3：配置阿里云 ESA（CDN 端）
操作步骤：
进入 ESA 控制台的缓存配置
添加规则匹配 .html 文件或首页路由
设置缓存行为为「不缓存」
https://bu.dusays.com/2026/06/16/6a30f03d037d3.png
四、验证结果
修改前（通过 CDN 访问）
Cache-Control: s-maxage=31536000 ← 被 CDN 缓存
Cache-Control: no-cache, no-store, must-revalidate
修改后（通过 CDN 访问）
Cache-Control: no-cache, no-store, must-revalidate ← 只有这个
Pragma: no-cache
Expires: 0
测试结果
✅ 电脑端和手机端都能获取最新页面
✅ 音乐播放不会因页面切换而中断
✅ 静态资源长期缓存，提升加载速度
五、关键经验
- 缓存头优先级
Nginx 的 proxy_hide_header 优先级高于上游返回的头
ESA 的缓存策略优先级高于源站缓存策略
- Next.js 客户端路由
首次访问需要从服务器获取页面
后续访问使用客户端路由
HTML 页面不被缓存才能正常工作
- 音乐播放器架构
使用 React Context 在根布局中管理状态
页面导航时不应卸载根布局组件
全页面刷新会导致所有组件重新挂载
- CDN 配置要点
HTML 页面：不缓存（no-cache）
静态资源：长期缓存（max-age=2592000）
避免使用 s-maxage，除非明确知道 CDN 行为
六、常见问题
Q1：为什么直接访问源站音乐不会断？
A1：直接访问时没有 CDN 缓存，每次都是从源站获取最新页面，Next.js 客户端路由正常工作。
Q2：为什么所有页面都点过一遍后音乐不会断？
A2：Next.js 的预取机制会缓存已访问的页面，后续导航使用客户端路由，不会触发全页面刷新。
Q3：修改配置后需要重启吗？
A3：Nginx 需要执行 sudo nginx -t && sudo systemctl reload nginx，Next.js 需要重新构建。
Q4：ESA 缓存刷新后多久生效？
A4：通常 5-10 分钟，具体取决于边缘节点数量和刷新策略。
七、总结
这个问题涉及多个层面的缓存策略：
浏览器缓存：需要明确的 Cache-Control 头
服务器缓存：Nginx 需要正确配置代理头
CDN 缓存：需要在控制台配置不缓存 HTML
应用缓存：Next.js 的客户端路由依赖正确的缓存策略
解决这类问题需要逐层排查，找到真正的瓶颈所在。