How to add loader during server rendering in Bike Share example?

[rhzs]

Hi guys & redfin,

Any idea, How to add loader during server rendering for the "main content" part in bike share example https://github.com/redfin/react-server/tree/master/packages/react-server-examples/bike-share?

Also it seems that the footer section will not be rendered before the content is rendered / timeout. Or on the other hand, the footer render is being blocked by the main content to be rendered. How can we make it async render like universal rendering boilerplates example out there?

[gigabo]

Hi @incubus8 - On the server the footer will render right away, but the resulting HTML string obviously needs to be held until the preceding content is sent.

In the browser we render elements in order to avoid having content appear and then get pushed down the page. Rendering later elements as they become ready could work well in a context where they won't get moved around later, but that's not the common case. Might work as an option?

[doug-wade]

@incubus8 Currently, React Server uses webpack only for the client, and not for the server. We've had some discussion recently about moving to webpacking the server too, but for now, we use require.extensions to override how files are loaded server side.

As to your question about the footer being rendered before the main content, this is intentional. One of the things we've focused on for React Server is that the page loads smoothly and consistently, and that it avoids the "popping" effect that you get when you allow elements lower on the page to render before elements higher on the page. We believe that this leads to better customer experience, since it avoids behaviors like buttons moving out from under your cursor or thumb when you go to click a button on a page -- you know that once it is rendered, it shouldn't "jump" down the page.

[rhzs]

@doug-wade @gigabo Sorry late reply, I think let us firstly forget about customer experience. Since it is just for demo purposes. I know well that it will have "popping" effect / the content pushed down the page.

Apart from that, I also think it is important to have async browser rendering, not just holding data in server and pushed it sequentially after the waited request timeout/error. I have found some other implementations, it may differ from what ReactServer does. Here are the resource examples I found:

1. http://www.juhonkoti.net/bigpipe/example.php
2. http://chrischandler.name/

Now, notice that above demo examples are displaying the loader or giving user feedback interaction to wait for the data being streamed from server. What do you think? Can we make similar loader?

[mocheng]

When I get to know react-server, I thought it could work in bigpipe mode. Unfortunately, it counld not. The react component is a nice encapsulation that is perfect for bigpipe.

I believe there could be better customer experienve if ther is bigpipe(or async browser rendering as @incubus8 named). Image we have three components in page: Header, Left panel and Right panel. The markup is in the same sequence.

+------------------------------+
|              Header          |
+---------------------+--------+
|                     |        |
| Left                | Right  |
| Panel               | Panel  |
+---------------------+--------+

The backend API of Header takes 300ms; the Left Panel takes 500ms and the Right Panel takes 300ms. So, even tough Right Panel markup is ready in 300ms, it still has to wait for another 200ms to get Left Panel ready.

If the server can push down markup and hydradated data of Right Panel in time point of 300ms. It would bring better user expereince.