CODEWITHSUNDEEP
javascriptreactjsserver-side-rendering
whiteElephant
whiteElephant

Reputation: 263

Does react server side render wait for async calls to finish?

With react server side rendering, is the rendered HTML only sent to the client once the state has been fully loaded?

For example, if a user requests a page that has multiple async API calls, will the client then have to wait for those API calls to be completed before they receive any packaged HTML?

If this is correct, could a user be left looking at an empty browser window if the page they have requested has slow running API calls? i.e. the server is waiting for the API calls to finish before it sends a response to the client.

I’ve read the documentation at http://redux.js.org/docs/recipes/ServerRendering.html, but I’m not sure if I’m interpreting it correctly. Could someone please clarify this for me?

Upvotes: 2

Views: 1873

Answers (1)

Ming
Ming

Reputation: 4300

In a word: NO. ReactDOMServer.renderToString does not support async call out of box.

What you can do is pre-fetch data and put it in the html then send it back to client, for example: 

<script>
   window._preFetchedData = {"somedata": {"post": {//...
</script>

So when the page was sent to browser, the front-end should read and load the preFetchedData.

In my opinion, React virtual-dom only provided half(1/3?) of the solution to server-side rendering problem. To accomplish perfect server-side rendering, data flow management needs a great effort, which in many cases does not worth it.

Upvotes: 3

Related Questions