Skip to content

Proof of concept of running react.js on the server side with play

Notifications You must be signed in to change notification settings

yanns/play-react

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

35 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

play-react

Proof of concept of running react.js on the server side with play

Details

Rendering on the Client Side

The page under /clientSide suffers from a "Flash Of No-Data Content". To display some data, the browser must:

  1. load the page and the html, displaying html without data
  2. make an ajax request to the server
  3. wait for an anwser
  4. display the data

This sample application simulates a slow AJAX response to make this flash visible.

Pre rendering on the Server Side

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:

Pre rendering on the Server Side and streaming the page

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

TODOs:

  • use nodejs styles modules for the client side libraries -> bind browserify or similar tool

About

Proof of concept of running react.js on the server side with play

Resources

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published