Server Side Rendering React on Total.js server

These days server side rendering has become an important feature for heavy client side applications and now most of the client side frameworks support it. In this article we focus on Server Side Rendering React on 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. This is the first article about integration react server side rendering on total.js – You don’t find any article about this issue ūüôā

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
  • We can¬†use node command to run server ¬†or ¬†babel-node or babel-cli :
    node server.js
    or
    babel-node server.js

Below presented skeleton/project You can find on my GitHub repository: https://github.com/maxprog/total.js-react.js-server-render-side.git

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

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

And now MOST IMPORTANT PART OF OUR SOLUTION – server side rendering:

Please pay attention on few things: don’t use arrow functions (this couses Incorrect way to operate the server), remember about require(‘babel-core/register’); , don’t use like in express or another node frameworks request and response parameters in route main function.. You can do it by lines

You can serve routing by two alternatives lines:

In case of first one line You have to use react file like
This way can separate all react instructions in /client directory

The last operation it is installation process all necessary modules:

  1. Install babel and react packages
    
    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 
    
  2. Install the all necesary modules and packages in project directory
    npm install
    
  3. Start the server from the root directory of project
  4. node server
    
  5. Visit http://localhost:8000
  6. 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

April 13th, 2017

  • I wish to express my affection for your generosity in support of those individuals that require guidance on this one area. Your personal dedication to getting the solution all through was particularly important and have consistently made some individuals much like me to arrive at their goals. Your entire interesting facts means much a person like me and a whole lot more to my colleagues. Thanks a lot; from each one of us..

  • I would like to show some thanks to this writer just for rescuing me from this type of instance. As a result of checking through the internet and seeing recommendations that were not powerful, I was thinking my life was well over. Living devoid of the approaches to the difficulties you’ve fixed as a result of your entire write-up is a crucial case, as well as the kind which might have in a wrong way damaged my entire career if I hadn’t come across your blog. The know-how and kindness in touching all things was vital. I don’t know what I would’ve done if I had not come upon such a stuff like this. I can also at this moment look forward to my future. Thank you so much for this expert and result oriented help. I will not be reluctant to propose your blog to anybody who will need assistance about this matter..

  • Leave a Reply

    Your email address will not be published. Required fields are marked *