如何强制更新单页应用程序（SPA）页面？ [英] How to force update Single Page Application (SPA) pages?

问题描述

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

In fully server side based rendering (non Web 2.0), deploying server side code would directly update client side pages upon page reload. In contrast, in React based Single Page Application, even after React components were updated, there would be still some clients using old version of the components (they only get the new version upon browser reload, which should rarely happen) -> If the pages are fully SPA, it's possible that some clients only refresh the pages after a few hours.

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

What techniques should be employed to make sure the old components versions are not used anymore by any clients?

更新：API没有改变，只有React Component用更新的版本更新。

Update: the API doesn't changed, only React Component is updated with newer version.

推荐答案

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

You can have a React component make an ajax request to your server, when the application loads, to fetch "interface version". In the server API, you can maintain an incremental value for the client version. The React component can store this value on the client (cookie/local storage/etc). When it detects a change, it can invoke window.location.reload(true); which should force the browser to discard client cache and reload the SPA. Or better still, inform the end-user that a new version will be loaded and ask them if they wish to save the work and then reload etc. Depends on what you wanna do.

这篇关于如何强制更新单页应用程序（SPA）页面？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！