React服務器端渲染入門

• 理解
  • 當服務器端接收到請求時, 在服務器端基于React動態(tài)渲染頁面, 并返回給瀏覽器顯示
  • 相對于瀏覽器端渲染的好處?
    • 服務器端和客戶端可以共享某些代碼瘦馍，避免重復定義歼秽。
    • 首次加載頁面的速度加快
    • 便于SEO(搜索引擎)優(yōu)化。服務器端渲染可以讓搜索引擎更容易讀取頁面的meta信息以及其他SEO相關(guān)信息
      • 說到這里情组，我們再拓展一點：一個image標簽燥筷，seo是先找它的alt還是找title呢箩祥？答案是，找alt
  • 相對于瀏覽器端渲染的不好?
    • 對服務器的壓力增大
    • 要求服務器使用基于node搭建
• 簡單編碼實現(xiàn)服務器端渲染
  • 應用文件結(jié)構(gòu)

    react-node
      |-- src
          |-- App.js-----------------主組件js
          |-- server.js--------------啟動服務器監(jiān)聽, 處理請求的js
      |-- index.js---------入口js
      |-- .babelrc---------babel配置文件
      |-- package.json-----應用包信息文件
    

  • 編碼
    • package.json

      {
        "name": "react-node",
        "version": "1.0.0",
        "scripts": {
          "start": "node index"
        },
        "devDependencies": {
          "babel-preset-es2015": "^6.6.0",
          "babel-preset-react": "^6.5.0",
          "babel-register": "^6.8.0"
        },
        "dependencies": {
          "react": "^15.3.1",
          "react-dom": "^15.3.1"
        }
      }
      

    • .babelrc

      {
        "presets": ["react", "es2015"]
      }
      

    • App.js

      import React, {Component} from 'react'
      class App extends Component {
      
        render() {
          return (
            <div>測試React服務器</div>
          )
        }
      }
      export default App
      

    • server.js

      import React from 'react';
      import { renderToString } from 'react-dom/server';
      var http = require('http');
      import App from './App';
      
      //創(chuàng)建服務器對象, 并啟動監(jiān)聽
      http.createServer(function (request, response) {
        //向瀏覽器端寫頭信息
        response.writeHead(200, {'Content-Type': 'text/html'});
        //渲染組件成標簽結(jié)構(gòu)字符串
        const appHTML = renderToString(<App />);
        //向瀏覽器返回結(jié)果
        response.end(appHTML);
      }).listen(8888);
      // 終端打印提示信息
      console.log('Server running at http://127.0.0.1:8888/');
      

    • index.js

      require('babel-register');
      require('./src/server.js');
      

  • 啟動服務器運行:
    • 命令: npm start
    • 訪問: http://127.0.0.1:8888

接下來也是代碼演示:

image.png

src/app.js

import React from "react";

export default class App extends React.Component{
    constructor(props){
        super(props);
    }

    render(){
        return (
            <div>測試React服務器</div>
        )
    }
}

sec/server.js：

import React from 'react';
import { renderToString } from 'react-dom/server';
var http = require('http');
import App from './App';

//創(chuàng)建服務器對象, 并啟動監(jiān)聽
http.createServer(function (request, response) {
  //向瀏覽器端寫頭信息
  response.writeHead(200, {'Content-Type': 'text/html'});
  //渲染組件成標簽結(jié)構(gòu)字符串
  const appHTML = renderToString(<App />);
  //向瀏覽器返回結(jié)果
  response.end(appHTML);
}).listen(8888);
// 終端打印提示信息
console.log('Server running at http://127.0.0.1:8888/');

index.js

//這里babel-register的意思就是用來解析下面的src/server文件
require("babel-register");
require("./src/server");

output頁面:
在頁面上輸出：測試React服務器