Why React recall API when use Server side rendering?

Question

I'm trying to using server-side render for my React web application (redux + react-router).

Server returned rendered HTML properly with API call on the server side.

But when browser receives the HTML document, it recalls API second time.

So it makes API call twice: 1 on server and 1 on the client with same result data.

Why client recall the API and How to avoid that duplicate call?

Answer 1

Check if the html returned contains script which calls the server. If that's the case, you have to either:

1. Modify this call to receive this piece of data in an asynchronous way, so the page doesn't get reloaded
2. Modify the returned HTML page, so it doesn't execute any further calls

It's a bit hard to speculate without an example