How to get rid of duplicate requests to the server in react + php and server-side rendering?

Question

PHP

Let's say I'm doing an infinite-load for products in react. When reloading the page, it is loaded using server-side rendering 16 products. Then the react component will be loaded, which also pulls data from the server. It turns out that the content was generated by the server and pulled out the goods from the database, then the react component was loaded, also turned to the server and received the same goods. How to make react behave as if it added these goods that were generated by the server, and it was not necessary to pull the same information 2 times?

Answer 1

For this, it is necessary to move the network logic to a separate layer with which the react components will work. In simple words, load detection should not be performed in components, but in separate services. On the server, these services always execute requests, and on the client only in cases where the data has not already been cached in them. That is, you made a request on the server and sent this data, along with the initial render, to the client. The client uses this data when initializing the same services and therefore they do not make requests. You just need to catch the moment and do not forget to delete this data.