Asynchronous React Component and Server Side Rendering React on Total.js server

Today we will focus on Asynchronous React Component to communication with REST API and  react server side rendering on total.js.

Assumptions and Benefits our project:

  • Design and build modular applications based on components in React.js
  • Use server side rendering of React with handle routing on total.js server
  • Use Asynchronous React Component to communication with REST API Total.js server
  • This gives us the benefit of serving the first page loaded by the user straight off from the server, thus resulting in a faster loading time

Below presented skeleton/project You can find on my GitHub repository:

Structure of directories is following:

  1. Expanded structure directories of total.js:

  1. Expanded structure directories of React.js:

The most important:

In case of catalogs structure:

  1. /client – React.js directory
  2. Remaining directories – Total.js

In case of configuration Total.js:

You have to define React.js directory in config file to block  total.js process  of compiling script – for this process will be responsible Webpack and React.js
If You want use /public to storage css, img or another files then You have change “directory-public” to correct directory e.g. /public/

Please remember about placing @{layout(”)}  in index.html and pay notice on line

@{self.content(model.markup, ‘text/html’)}  responsible for display returned rendered generated html from server side. This is very important.. If You will use another instruction like @{model.markup} then in browser You will see row html text

In main server file (e.g. server.js) You have to place babel modules by require(‘babel-core/register’); responsible for handle react.js to avoid errors like unexpected error or invalid character  (<App ..>)  in case of parse language composition of .jsx

All necessary modules to handle react and babel source codes are:

npm i --save react react-dom react-router babel-register
npm i --save-dev babel-cli babel-core babel-preset-es2015 babel-preset-react babel-preset-stage-0 webpack babel-loader

To asynchronous communication both on total.js and React side You have to add async-props module

npm i --save async-props

To asynchronous communication on client side – React.js will be necessary isomorphic-fetch

npm i --save isomorphic-fetch

After installation You have configure .babelrc config file – If You missing this configuration then You will have a lot of errors

MOST IMPORTANT PART OF OUR SOLUTION – server side rendering will be placed in default.js controller:


Please pay attention on used async library async-props and changes related with render process where we use additional properties asyncProps with renderProps

Second server controller called as api.js will contain REST API logic and will be responsible for sending data to client
This properties asyncProps with renderProps You have to pass to routerContext.js file and perform modification to use async-props module
To communication react client with rest api our server we will use service with implemented isomorphic-fetch module responsible for asynchronous communication with our total.js server

The last operation it is installation process all necessary modules:

  1. Install the all necesary modules and packages in project directory
    npm install
  2. Start the server from the root directory of project
  3. node server
  4. Visit http://localhost:8000
  5. That’s all – Now You can create Amazing and Professional SPA applications

In console of Total.js server You can see generated html of react by server side

In terminal server You can see all traffic related with Rest API and rendered generated html by server

April 16th, 2017