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 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:
- Expanded structure directories of total.js:
- Expanded structure directories of React.js:
The most important:
In case of catalogs structure:
- /client – React.js directory
- 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:
- 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
- Install the all necesary modules and packages in project directory
npm install
- Start the server from the root directory of project
-
node server
- Visit http://localhost:8000
- 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