Proof of concept of running react.js on the server side with play
The page under /clientSide suffers from a "Flash Of No-Data Content". To display some data, the browser must:
This sample application simulates a slow AJAX response to make this flash visible.
The page under /serverSide pre-renders the html on the server side and displays the page already with data.
The changes on the client side are then applied dynamically with the normal client side JavaScript ReactJS code.
The pre-render the ReactJS components on the server side, the following libraries are used:
The pre-rendered page waits for the data before sending any bytes to the browser. To optimize this, another version /serverSideStream sends the first bytes immediately, to let the browser load the CSS / JavaScript, and then sends the rest of the body when available. For this, I used the Facebook’s BigPipe concept as presented in the talk “Building composable, streaming, testable Play apps” from Yevgeniy Brikman