摘要：今天分享一篇公司大佬的文章，非常厲害的大神崇拜臉，講講服務端渲染。服務端渲染，它到底用了什么原理呢服務端渲染原理服務端渲染的方式有很多，主流的服務端語言為使用渲染。

富婆來報道，今天想問題想不出來，隨手抓了一下頭發，沒想到啊沒想到，我那濃（mei）密(sheng)茂(ji)盛(gen)的秀發又少了好幾根，一定要改掉這個想不出來問題就揪頭發的壞習慣。今天分享一篇公司大佬的文章，非常厲害的大神（崇拜臉），講講react服務端渲染。

寫過React組件的同學都知道，React組件一般是基于瀏覽器端使用js渲染的。它所生成的Dom結構都是后期由js計算生成。如下圖，我們可以看到頁面源文件中id為root中的dom結構實際是空的。但實際在element元素中，已經可以看到Dom樹的生成了。

客戶端渲染DOM結構圖

服務端渲染DOM結構圖

React服務端渲染（簡稱SSR），也就是在服務器端直接渲染React組件，使用戶在首屏便能感受到Dom樹的存在，在頁面html文件生成的同時，Dom結構也就存在了。用戶看到的源文件即為圖2。
那么為什么要使用服務端渲染呢？客戶端渲染不是更能減輕服務端負擔嗎？我們來看下

簡單了解了React-SSR，那么我們使用服務端渲染的目的主要是為了解決如下幾大難題：

1.搜索引擎優化（seo）

因React組件采用js在瀏覽器中渲染，實際搜索引擎爬蟲爬到的數據也就是圖一中的沒有DOM結構的數據。，及其不友好，如圖1。

2.可以解決首屏白屏問題

Js渲染的組件需要消耗性能，故在性能較差的終端中，瀏覽器端渲染組件所消耗的時間就會比較長。在瀏覽器執行js渲染組件時，對用戶而言，就是所謂的白屏。

開啟服務端渲染前

開啟服務端渲染后

開啟前后script計算時間對比

如果你的項目存在上面的問題，而又不想拋棄React組件，可以嘗試使用React服務端渲染。
服務端渲染，它到底用了什么原理呢？

服務端渲染原理

服務端渲染的方式有很多，主流的服務端語言為使用nodejs渲染。下圖為簡單原理圖：

服務端渲染簡單流程圖

簡單概括就是這三步驟：
1.客戶端發起請求
2.Nodejs服務器分析頁面數據結構并渲染React組件
3.客戶端展示html

實例解說

下面我們來看下具體實例，實例是基于express的React服務端組件渲染實例。Express提供頁面以及中間層的API(點擊tab切換調用的接口)服務，Webpack實現服務端和客戶端的React組件打包。

界面預覽

總共包含一個頁面、兩個組件。其中組件一、二均能將首屏數據返回，同時在客戶端重新執行react組件渲染。

首屏DOM結構

實例地址：（這是一個express_react_ssr腳手架）
https://github.com/webqdtalk/...

運行環境

Nodejs:6.9.0 不限于此版本
Webpack：3.5.2 不限于此版本
Package.json及相關說明

這是Package.json：

{
  "name": "react-express-ssr",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "webpack --progress && node ./bin/www"
  },
  "dependencies": {
    "axios": "^0.18.0",  //實現組件中ajax請求
    "babel-core": "^6.24.0", //打包react組件
    "babel-loader": "^6.4.1", //打包react組件
    "babel-preset-es2015": "^6.24.0",//打包react組件
    "babel-preset-react": "^6.23.0",//打包react組件
    "cookie-parser": "~1.4.3", //express依賴
    "css-loader": "^0.23.1",  //express依賴
    "debug": "~2.6.9", //express依賴
    "ejs": "~2.5.7", //express依賴
    "express": "~4.16.0", //express依賴
    "extract-text-webpack-plugin": "^2.1.0",//打包scss文件依賴
    "http-errors": "~1.6.2",//express依賴
    "morgan": "~1.9.0",//express依賴
    "node-sass": "^4.5.1", //打包scss文件依賴
    "react": "^16.8.6",//打包react組件
    "react-dom": "^16.8.6",//打包react組件,
    "sass-loader": "^6.0.3",//打包scss文件依賴
    "style-loader": "^0.13.0",//打包scss文件依賴
    "webpack": "^3.5.2" //打包react組件
  },
  "devDependencies": {
    "babel-preset-env": "^1.7.0",
    "babel-register": "^6.26.0"
  }
}

Clone項目后，直接在根目錄執行npm i 安裝完成后運行npm start并打開瀏覽器訪問localhost:3000就可以訪問了。

重要模塊說明

頁面入口文件配置
當執行npm start并訪問localhost:3000后，express入口文件app.js中引入了server/index.js

App.js

服務端路由如何實現

Express提供router方法

router.get("/urlpath", function(req, res, next) {
    const html=ReactDOMServer.renderToStaticMarkup();
    res.render(‘pageejs’, { title:"服務端渲染",content: html });
});

Webpack入口文件：server/index.js中引入了components中的組件，并執行ReactDOMServer.renderToStaticMarkup方法，將組件在服務端渲染為頁面DOM結構字符串，再由express提供頁面服務，在ejs模板中輸出。圖四中的兩個api接口是為了點擊tab時請求數據用。下圖為ejs模板文件。

Server/index.js

Views/index.ejs

服務端和客戶端如何打包組件？

Webpack配置如下：

Webpack.config.js

客戶端渲染的入口文件為/components/app.js，也包含了服務端的入口文件，保證了服務端和客戶端使用同一套組件輸出，同時也保證在服務端渲染結束后，客戶端組件能夠繼續正常運轉。

Components/app.js

服務端渲染的入口文件為components/index.js,如下圖中可以看到此入口文件中引用了兩個額外的組件：swichtab和ssrplugin，就跟純前端渲染的react組件基本一致!

Components/index.js

客戶端打包組件后輸出在public/main.css和public/index.js,在視圖文件views/index.ejs中引用實現客戶端渲染。

實踐過程的注意點

1.express無法執行import 導致報錯。

解決方案：
npm i babel-register --save
同時在bin/www中配置babel-register

require("babel-register")({
  presets: ["env"]
});

2.服務端渲染css或者scss文件時報錯

解決方案：
因服務端直接運行css或者scss等文件會導致語法報錯，故在實際組件中，需要對require的scss文件進行容錯或者動態按需加載。

try{
    require("./index.scss")  //因服務端渲染不需要scss文件，但webpack仍會處理scss文件，打包scss會出錯，此處需要作為容錯處理或按需加載
}catch(e){
    console.log(e.message);
}

服務端渲染雖好，但是對項目的改造影響還是比較大的，改造需謹慎評估~

你懂的！！！

如有不對的地方，歡迎各位斧正！

歡迎關注我的公眾號，大家一起交流，Web前端Talk