React Router 懒加载路由清单的缓存问题分析与解决方案

问题背景

React Router 7.3.0 版本引入的懒加载路由发现功能（Lazy Route Discovery）中，服务端返回的路由清单（manifest）响应默认设置了强缓存策略。这个缓存配置在某些部署环境下可能导致路由更新不及时的问题。

技术细节

路由清单是React Router实现懒加载路由发现机制的关键部分。当客户端应用需要加载新路由时，会向服务端发送请求获取路由配置信息。服务端响应默认包含以下缓存头：

Cache-Control: public, max-age=31536000, immutable

这种配置意味着：

1. 响应可以被任何缓存（包括CDN）缓存
2. 缓存有效期长达1年
3. 资源被视为不可变（immutable）

问题影响

这种缓存策略在以下场景会产生问题：

1. 版本更新不同步：当应用部署新版本后，CDN可能继续返回旧版路由清单，导致客户端无法感知路由变更
2. 版本检测失效：7.3.0版本新增的版本不匹配检测机制可能无法生效，因为请求被CDN拦截
3. 路由加载异常：可能导致客户端导航时出现404错误，而直接刷新页面却能正常工作

解决方案

1. 禁用CDN缓存

对于使用CloudFront等CDN服务的部署，可以配置规则禁止缓存路由清单请求。例如，设置路径规则/__manifest*不进行缓存。

2. 主动版本检测

实现一个专门的资源端点来返回当前部署版本，客户端可以定期轮询该端点。当检测到版本变化时，主动触发页面刷新。

3. 查询参数缓存策略

虽然路由清单请求包含版本参数作为缓存破坏因子，但某些CDN配置可能忽略查询参数。确保CDN配置考虑了完整的URL（包括查询参数）作为缓存键。

最佳实践建议

1. 生产环境中应谨慎评估路由清单的缓存需求
2. 对于频繁更新的应用，建议禁用或缩短缓存时间
3. 考虑实现部署后的主动通知机制，确保客户端及时更新
4. 测试CDN配置是否正确处理带查询参数的URL缓存

总结

React Router的懒加载路由发现功能虽然提升了性能，但其默认的强缓存策略需要根据实际部署环境进行调整。理解这一机制的工作原理有助于开发者构建更可靠的SPA应用，特别是在CDN等中间件存在的复杂部署场景下。