"React Query 与 SWR 在 React 19 RSC 下的协作缓存策略"

React Query 与 SWR 在 React 19 RSC 下的协作缓存策略概述RSC 负责静态与数据密集视图，客户端缓存用于交互与局部刷新。合理协作可降低网络与渲染负载并保持数据一致性。核心内容1. 数据边界与读取RSC 读取服务端数据，客户端组件使用缓存钩子统一失效与刷新策略2. 标签与局部失效`revalidate` 与标签驱动页面级刷新客户端缓存按 key 局部失效技术参数与验证测试环境React：19.0.0React Query：5.x / SWR：2.x运行时：Vercel Edge / Node Server基准（列表+详情页，100 并发）指标仅客户端缓存RSC + 客户端缓存提升首屏 FCP1.6s1.1s31.3%可交互 TTI2.2s1.5s31.8%网络请求数高低明显下降方法：对等页面与 A/B，RUM + Synthetic 采样。最佳实践统一缓存键与失效策略关键路径优先 RSC，交互用客户端缓存注意事项客户端与服务器组件边界明确第三方库兼容与副作用治理参考资料React 19 与 RSC 文档React Query/SWR 指南缓存与失效策略实践---发布信息发布日期: 2025-11-18最后更新: 2025-11-18作者: 前端技术团队状态: 已发布技术验证: 已验证阅读时间: 18分钟版权: CC BY-SA 4.0