Reactjs Question posted in
The new location for the React Documentation can be found here.

Reactjs – what techniques do react websites use to update static data?

I have a web developer using React to develop a Point-Of-Sale website. The website is mostly front end. I developed an API that the website uses to pull and post data to my desktop app’s database. So basically the API delivers a menu specific to the user, the website allows the user to ring up a sale and the website posts the sale by passing the shopping cart to the API. So that the user specific menu is smaller (meaning less data and/or network traffic), the website needs to pull a master menu with product descriptions, etc from the API once daily (maybe 1AM when few users on the website), then only the things like SKU and price (user specific) are sent when the user logs in. The API is called to get this user’s specific menu. How do websites update things like my master menu periodically (daily, hourly or only when an update is available)? I believe we have decided on Redux to store data locally.

The website calls the API once a day to pull the master menu. The master menu contains sku and item description (about 30 characters) for about 1000 items. That data is stored locally. I did that so that when a user logs in and the website calls the API to get a custom menu for the user, I do not send the item description thereby reducing the amount of data. Because the user specific menu only contains the sku, the website gets the corresponding item description from the master menu. Theoretically that makes sense to an old desktop app developer because we are simply passing less data over the network. My question is, assuming I do things this way, how does the website periodically update the master menu or how do I let the website know that a master menu update is available and should be applied.

Tags:

2

Answers


  1. 0

    For the data fetching part, I recommend using tanstack query, a library that supports reloading data periodically or at will. Some features that it supports are:

    • retrieving data after some time has passed
    • retrieving data after the user focus your tab
    • manually marking a query as invalid to fetch it again immediately
    • detecting network changes and reloading data after the wifi connection has been lost and then regained

    There are some details that make different a web page from a desktop app that you may want to acknowledge:

    • you cannot have a background service to fetch data (well you can, but it is not preferable for most websites). This means that every data retrieval must be done while the page is open in the client
    • you cannot write to persistent files. However you can use localStorage to store any persistent data you need (but safari will erase it if the user doesn’t access your page during 7 days)
    • related with the previous, anyways the best for websites usually is to keep data in-memory, and that is where libraries like Redux are introduced. Redux data will be erased after closing the browser tab, but you should fetch it again after loading again the page
    Login or Signup to reply.
  2. 0

    If I understand correctly your website is storing in the local storage of the client browser a cache with the data about menus, you want to be able to update this data either periodically or even better when the master data have been updated.

    There is various options, IMO the best would be Server Sent Events.

    Server Sent Events

    To trigger an update of your cache data on all browsers of your customers, Server Sent Events could be a solution, the limitation is that the communication is only server >> client. See documentation here

    Scheduled task in browser

    As proposed in @Feder 240516 answer, Tanstack seems interesting for it’s periodical reload

    Long polling & HTTP Cache

    Your browser code could periodically call your API and if the data didn’t changed the API would answer with the HTTP code 304 "Not Modified", which would stop the process here. Until data is updated on the server and then your API will serve the fresh data to the browser on the next periodical call See documentation here

    Websockets

    If you expects to add features to your website that will require bi-directional communication server <> client, then websockets could be of interest. See documentation here

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search