How to force update Single Page Application (SPA) pages?

javascript reactjs single-page-application
Pahlevi Fikri Auliya picture Pahlevi Fikri Auliya · Dec 21, 2015 · Viewed 33.9k times · Source

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?

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

Answer

hazardous picture hazardous · Dec 21, 2015

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.

Related questions

Is store.dispatch in Redux synchronous or asynchronous

I realize this is a basic question but I had no luck finding the answer elsewhere. Is store.dispatch synchronous or asynchronous in Redux ? In case it is asynchronous is there a possibility to add a callback after the action …

Read More
Why do we need a Single Page Application?

The Single Page Application (SPA) has come to us. A lot of new things come with it as well, like Routing, Page life cycle at client side, MVC pattern, MVVM pattern, MV* pattern,... and some of Javascript patterns also come …

Read More
How to show/hide ReactJS components

Trying to learn ReactJS.. but what confuses me is the rendering of the component. Every example I've seen defines a React component class and at the end has something like: React.renderComponent( <comp attr="value"" />, document.getElementById('comp') ); …

Read More