Detailed explanation of react server rendering (isomorphism) method

I have been learning react for a while, and the speed of rendering the home page with react has not been ideal as well as SEO. I plan to study react magic server rendering.

React server rendering can only use nodejs as a server language to achieve front-end and back-end isomorphism. After parsing react components in the background and generating html strings, return to the view page.

Why can the background parse react components? Because it is a Javascript running environment, nodejs and javascript syntax are basically the same, so nodejs can parse react components normally.

1. Prepare the action

1. Install nodejs and install express

Install nodejs tutorial:https:///article/

Installation Express Tutorial:https:///article/

2. Install node-jsx (make nodejs support jsx syntax)

$ npm install node-jsx

3. Install ejs template engine

$ npm install ejs

4. Use the ejs template engine to parse the html view file (configure the express framework application), and modify the configuration as follows:

var ejs = require('ejs');
 ('.html',ejs.__express);  //Use ejs template engine to parse html view file ('view engine', 'html');

2. The specific implementation is as follows:

Express routing:

"use strict";
var express = require('express');
var router = (); require("node-jsx").install();  //Install "node-jsx", installing this module can make nodejs compatible with jsx syntaxvar React=require("react");
var Com=require('../component/').Component //Introduce react component('/', function(req, res, next) {
 var html=(Com({name:"dudeyouth"}))  //Paste the parameters to the component and parse them into html string using renderToString method ("index",{component:html}); // Render to the interface});
 = router;

react component:

"use strict";
var React=require("react");
var Component=;
class Test extends Component{
  render(){
    return <h1>{}</h1>;
  }
}
={"Component":function(props){
  return <Test {...props}/>
}};

View (using ejs template engine):

&lt;html&gt;
  &lt;head&gt;
    &lt;title&gt;DudeYouthblog&lt;/title&gt;
    &lt;meta charset="utf-8" /&gt;
    &lt;link href="css/" rel="external nofollow" rel="stylesheet"/&gt;
    &lt;link href="css/" rel="external nofollow" rel="stylesheet"/&gt;
  &lt;/head&gt;
  &lt;body&gt;
  &lt;div &gt;&lt;%-component%&gt;&lt;/div&gt; &lt;!--useejsAfter the template parsinghtmlString--&gt;
  &lt;/body&gt;
&lt;/html&gt;

The above is all the content of this article. I hope it will be helpful to everyone's study and I hope everyone will support me more.