前端容灾

什么是前端容灾

前端容灾指的是当后端接口挂了，依然可以保证页面展示信息完整。我们以百度首页中新闻模块举例，当你打开百度的时候，服务端渲染好的页面出来以后，需要请求新闻接口拿到数据渲染新闻模块。你的老板告诉你，不论任何情况，必须展示新闻和广告，即使新闻接口挂了。这个时候怎么办，也就是前端容灾的范畴了。

前端容灾可用手段

localstorage 缓冲接口数据

新闻模块的接口，每次有返回的时候，都存入 localstorage 中，以接口路径为 key，返回数据为 value，当新闻接口请求失败的时候先从 localstorage 中读上次成功请求时候的数据，展示出来。

备份一份静态数据到 CDN

让业主方同学提供一份兜底新闻数据，存放在 CDN 上，新闻接口返回失败，用户localstorage中也没有数据的时候，去 CDN 对应地址拉取数据渲染。

关于容灾数据配置和维护，后台系统主要提供的是对 CDN 容灾数据的，增删改查的功能，还有其他相关配置信息维护管理的功能。同时为了保持容灾远程数据的可用性，还承担着对这些数据管理以及定时更新的任务。

利用 Service worker 的 caches API 做页面接口缓存

Service worker 提供了 fetch 事件可供监听，当页面发出请求的时候，会先过 fetch 方法，你可以在这里定义任何你需要的缓存策略，比如请求成功后，将结果存入caches。Service worker 中，你甚至可以缓存当前页面的 HTML，让网站离线运行。

通过上面这些手段，可以保证只要给用户吐出 HTML 就能保证页面完整性。对于让页面始终可吐出 HTML 这件事，那就又属于后端，运维同学所做的了。可以借助上面我介绍到的集群的方式，也可以通过 CDN 的方式(动态DNS)来解决。

总结：在设计兜底容灾组件时，除了 CDN 容灾外，我们还考虑了本地存储兜底方案以及离线数据兜底方案。