如何强制更新单页应用程序(SPA)页面？

在基于服务器端的完全呈现(非Web 2.0)中,部署服务器端代码将在页面重新加载时直接更新客户端页面.相比之下,在基于React的单页应用程序中,即使在更新了React组件之后,仍然会有一些客户端使用旧版本的组件(它们仅在浏览器重新加载时获得新版本,这应该很少发生) - >如果页面完全是SPA,有些客户可能会在几个小时后刷新页面.

应采用哪些技术来确保任何客户不再使用旧组件版本？

更新:API未更改,只有更新版本更新了React组件.

1> hazardous..：

---

在应用程序加载时,您可以让React组件向服务器发出ajax请求,以获取"接口版本".在服务器API中,您可以维护客户端版本的增量值.React组件可以将此值存储在客户端(cookie /本地存储/等)上.当它检测到更改时,它可以调用window.location.reload(true);哪个应该强制浏览器丢弃客户端缓存并重新加载SPA.或者更好的是,通知最终用户将加载新版本并询问他们是否希望保存工作然后重新加载等取决于您想要做什么.

---

简而言之:@dotslash:您需要发送带有请求的api版本.服务器可以比较并发送回更新.如果您正在使用redux,那么在Web存储中很容易保存状态(重要的是redux值可序列化的一个原因)(https://developer.mozilla.org/en-US/docs/Web/API/Web_Storage_API).重新加载页面.检查redux是否存储了任何内容.如果是水合物还原剂.并使用必要的数据加载组件(如果您没有使用redux/react-redux,则必须手动为组件的状态执行此操作)

2> Andy..：

---

与史蒂夫泰勒的答案类似,但不是版本化API端点,而是按照以下方式对客户端应用程序进行版本控制.

每个HTTP请求都会发送一个自定义标头,例如:

X-Client-Version: 1.0.0

然后,服务器将能够拦截这样的头部并相应地做出响应.

如果服务器知道客户端的版本是陈旧的,例如,如果当前版本是1.1.0,则使用将由客户端适当处理的HTTP状态代码进行响应,例如:

418 - I'm a Teapot

然后可以通过以下方式对客户端进行编程以通过刷新应用程序来响应此类响应:

window.location.reload(true)

基本前提是服务器知道最新的客户端版本.

编辑:

这里给出了类似的答案.