I need to continuously update/refresh my page to ensure that it is in sync with my server. Currently, I am using setInterval, but I read that serviceWorkers might solve my problem in a better way. Is it remended to use serviceWorkers? (the background-sync seems like a good starting point.)
Or are there any other alternatives?
I need to continuously update/refresh my page to ensure that it is in sync with my server. Currently, I am using setInterval, but I read that serviceWorkers might solve my problem in a better way. Is it remended to use serviceWorkers? (the background-sync seems like a good starting point.)
Or are there any other alternatives?
Share Improve this question edited Jul 18, 2018 at 9:33 Ronan Boiteau 10.1k7 gold badges38 silver badges58 bronze badges asked Jan 3, 2018 at 7:43 raksheetbhatraksheetbhat 9602 gold badges12 silver badges25 bronze badges 1- 1 Ask yourself: How often you need new data? How is your data behaving, how fast is new data ing? How much new data per reload. How long does rendering of new data take? Depending on answers you might have to handle DOM cleanup, custom rendering to prevent constant rerender, grouping of data changes on back-end over a course of some time period etc.. Example, you have a graph that takes 0.5 sec to render but you get data updates 200 times per second. Even if you only render new data, browser will eat up resources and bee sluggish over time as DOM elements explode. – CodeSmith Commented Aug 7, 2020 at 10:41
4 Answers
Reset to default 5After some research, WebSockets seem like the best bet to have a live refresh on a website. Websockets helps maintain an open two-way connection between the website and the server so that whenever there is an update on the server, the server can push the changes on to the website.
No. setInterval is the way to go.
A ServiceWorker is used to cache the contents of your application for offline use (The browser will download the site as it is defined in the serviceworker and you can use some functionality offline). However, you are not able to contact your server, since this needs internet access.
Here es background-sync into the game. Let's imagine you have something like a chat application (web-based). You view the app the first time and in the background, all files are downloaded. After that, you are able to view the page offline and read messages which you already received. In the first place you cannot send messages, because that would need contact to the server. But with background-sync, you can schedule it for a send when the user is online the next time - so write your message only and hit send, it gets saved and will be pushed to the server the next time you connect to the internet.
I think you are accessing your server's data trough an API, and therefore neither the serviceworker, nor background-sync are used for these tasks.
Just send your server a request and update the data in the react app, as you do it right now using setInterval.
This assume to have to change many logic in your SPA and API but you can use the WebSocket protocol instead of HTTP/HTTPS.
Just have to send a notification to your React app with wss for fetch the data with your classical way in async http/https, you can store the data with Redux/Flux and it will refresh the ponents automatically.
I have a similar challenge, and I plan to try https://www.npmjs./package/react-refetch. My application isn't plex enough to need redux, so I'd rather avoid that.