Angular单页应用如何合理实现页面数据适时刷新？

按实现成本从低到高排列，你可以根据自己的项目规模选择适配方案：

1. 最低成本：路由触发请求+双层TTL缓存 #

完全不需要改现有接口结构，几十行代码就能搞定，中小站点足够用：

• 把现在绑在应用首次加载的3个接口（/api/GetCategories、/api/GetRecentPosts、/api/GetAllPosts）的触发逻辑，从应用初始化钩子移到路由激活逻辑里：Angular里可以监听Router的NavigationEnd事件，或者给首页/列表页加resolve守卫，每次用户进入对应路由页面就走一遍数据拉取逻辑，不用等用户手动按F5。
• 做双层缓存减少性能损耗：
  • 服务端给这三个查询接口加短周期缓存，比如分类数据缓存5分钟，帖子列表缓存30秒-1分钟，避免每次请求都直连数据库打满服务端压力
  • 客户端用Angular全局服务做内存缓存，给每份缓存加过期时间戳，发请求前先判断本地缓存是否在有效期内，没过期直接读缓存不发请求，过期了再走接口
• 这个方案下，用户每次切回首页最多等1分钟就能看到最新内容，没有感知上的延迟，改造成本极低，几乎没有后续维护负担。

2. 中成本：版本号校验增量更新 #

如果站点流量不小，想进一步省带宽、提升实时性，可以在上面方案的基础上加一层版本校验：

• 服务端给分类、帖子列表这两类公共数据维护一个最后更新的版本号/时间戳，每次有新帖子发布、分类调整，就更新对应的版本号。
• 客户端第一次拉取数据的时候，把拿到的版本号存在本地，下次进入路由页面时，先发一个极轻量的校验请求（只传本地存的版本号，接口返回「是否需要更新」的布尔值就行），如果版本一致直接用本地缓存，不一致再拉取全量新数据。
• 比固定TTL缓存的实时性更好：内容更新后用户只要切一次路由就能拿到最新内容，不用等缓存过期，同时比每次拉全量数据省90%以上的校验请求流量。

别做固定间隔的定时轮询，哪怕用户把页面开在后台挂几小时不看，轮询也会一直发请求，纯浪费服务端资源和用户流量，性价比极低。

3. 近实时需求：用SSE替代WebSocket，砍半维护成本 #

如果你想要接近WebSocket的实时推送效果，又不想承担WebSocket的高维护成本，直接用浏览器原生支持的Server-Sent Events（SSE）就行：

• SSE是基于HTTP的单向长连接，只需要服务端在有新帖子、分类更新的时候，往连接推一条更新通知，客户端Angular代码里用原生EventSource监听通知，收到之后自动触发对应列表数据的重新拉取即可。
• 不需要像WebSocket那样处理双工通信、复杂的心跳保活、消息确认逻辑，代码量比WebSocket少一半以上，维护成本低很多，完全满足你「内容更新自动同步，不需要用户手动刷新」的需求，也不需要做轮询。

选型建议 #

• 个人站、小流量内部站直接选第一个方案，半天就能改完上线，体验比现在要求用户手动F5好很多
• 日活过万的公开内容站选第二个方案，平衡性能、实时性和维护成本
• 只有当你除了帖子更新之外，还有评论实时提醒、在线人数统计这类大量实时交互需求的时候，再考虑上SSE或者WebSocket，不要为了单一的小需求上重技术方案。

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