8

I am using React to build SPA webpage ,the problem is when I deploy latest version of the app, the browser client won't changed except user refresh the page.

on multi-page application, when user click <a/> tag will request server to re-render a new page.

Is there some ways to solve the problem?

Moon soon
  • 2,616
  • 2
  • 30
  • 51
  • To clarify: a user loads your SPA app. You build and deploy a new version. You want the user's app to update without him reloading the page? – Gilbert Nwaiwu Apr 26 '17 at 08:38
  • without him manually refresh the page – Moon soon Apr 26 '17 at 08:40
  • I don't think there's any problem. Do you know how browsers work? A network request needs to be made to fetch the latest changes you deployed from the server. – U r s u s Apr 26 '17 at 08:41
  • I suppose you are looking for Hot Module Replacement, might want to check https://webpack.github.io/docs/webpack-dev-server.html https://webpack.github.io/docs/webpack-dev-server.html – Anuradha Kulkarni Apr 26 '17 at 09:42
  • Possible duplicate of [How to force update Single Page Application (SPA) pages?](https://stackoverflow.com/questions/34388614/how-to-force-update-single-page-application-spa-pages) – lobati Jan 08 '18 at 20:50
  • Possible duplicate of [deployed react web app requires hard refresh](https://stackoverflow.com/questions/46080221/deployed-react-web-app-requires-hard-refresh) – Michael Freidgeim Aug 20 '19 at 20:11

2 Answers2

0

Your need is somewhat similar to a chat-application (which will update itself by sending chat messages automatically)

I also use this auto-update's idea in my project, which use Meteor/React and websocket. However, my project's architecture is quite complicated, though, not sure if yours is simpler or not

Anyway, you can read the article below, which is helpful:

http://julian.io/live-chat-app-using-meteor-and-the-ddp-protocol/

If you still need more explanation on how to implement it, feel free to ask, I will try to explain using my own experience on my project

thinhvo0108
  • 2,212
  • 1
  • 13
  • 23
-1

The answer is to tell the browser not to cache the javascript bundle when it downloads from your host. You want to set the headers:

"headers": [
  {"source": "**", "headers": [{"key": "Cache-Control", "value": "no-cache"}]}
]

If you are using Create React App there are instructions to do so in the default repo README, for example for Firebase Hosting.

If you want the app to listen for changes to the production version, you can poll an endpoint that tells you what the current version is, and you can compare it to localstorage.

Nth.gol
  • 746
  • 9
  • 20
  • 1
    but what about mobile devices battery? check this article: https://marmelab.com/blog/2016/08/29/auto-reload-spa-on-mobile-setinterval.html – maxi-code May 19 '20 at 15:15