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:
- load the page and the html, displaying html without data
- make an ajax request to the server
- wait for an anwser
- display the data
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:
- /serverSide uses trireme provides a Node API on the JVM with Rhino
- /serverSide2 uses js-engine that itself uses trireme behind Akka actors
- /serverSideJavax uses js-engine that itself uses the Javax engine
- /serverSideNode uses js-engine that itself uses NodeJS
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
- use nodejs styles modules for the client side libraries -> bind browserify or similar tool