2

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?

whiteElephant
  • 263
  • 1
  • 6
  • 21

1 Answers1

2

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.

Ming
  • 4,110
  • 1
  • 29
  • 33
  • Thanks for the response Ming. Does the pre-fetched data have to be data or can it be some callback? The reason I ask is because It doesn't make sense to me that the user would have to wait for the server to pre-fetch all the data, what if the APIs are running slow. The user would be left with a loading browser up until all initial data has been fetched.. Does this make sense? Could you explain how this situation is handed? – whiteElephant Dec 09 '16 at 20:20
  • 1
    @whiteElephant The pre-fetched data have to be data normally. I understand your concern. The purpose of server-side rendering, ultimately, is to: 1. reduce AFT (above-the-fold time). 2. SEO. Therefore, the pre-fetched data should contain only necessary data for users to see the first sight. All subsequent data (e.g. caused by user interaction) will be retrieved using normal AJAX call by client-side. – Ming Dec 10 '16 at 08:49
  • @whiteElephant In a normal SPA, browser will invoke AJAX calls when web pages are loaded. Users will spend time(round-trip time is dominant) on waiting necessary AJAX calls (username, blog posts, etc.) to finish. Using server-side rendering you can eliminate most round-trip time so the AFT gets reduced overall. – Ming Dec 10 '16 at 08:59