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

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

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

客戶端渲染DOM結(jié)構(gòu)圖

服務(wù)端渲染DOM結(jié)構(gòu)圖

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

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

1.搜索引擎優(yōu)化（seo）

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

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

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

開啟服務(wù)端渲染前

開啟服務(wù)端渲染后

開啟前后script計(jì)算時(shí)間對比

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

服務(wù)端渲染原理

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

服務(wù)端渲染簡單流程圖

簡單概括就是這三步驟：
1.客戶端發(fā)起請求
2.Nodejs服務(wù)器分析頁面數(shù)據(jù)結(jié)構(gòu)并渲染React組件
3.客戶端展示html

實(shí)例解說

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

界面預(yù)覽

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

首屏DOM結(jié)構(gòu)

實(shí)例地址：（這是一個(gè)express_react_ssr腳手架）
https://github.com/webqdtalk/...

運(yùn)行環(huán)境

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

這是Package.json：

{
  "name": "react-express-ssr",
  "version": "0.0.0",
  "private": true,
  "scripts": {
    "start": "webpack --progress && node ./bin/www"
  },
  "dependencies": {
    "axios": "^0.18.0",  //實(shí)現(xiàn)組件中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項(xiàng)目后，直接在根目錄執(zhí)行npm i 安裝完成后運(yùn)行npm start并打開瀏覽器訪問localhost:3000就可以訪問了。

重要模塊說明

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

App.js

服務(wù)端路由如何實(shí)現(xiàn)

Express提供router方法

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

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

Server/index.js

Views/index.ejs

服務(wù)端和客戶端如何打包組件？

Webpack配置如下：

Webpack.config.js

客戶端渲染的入口文件為/components/app.js，也包含了服務(wù)端的入口文件，保證了服務(wù)端和客戶端使用同一套組件輸出，同時(shí)也保證在服務(wù)端渲染結(jié)束后，客戶端組件能夠繼續(xù)正常運(yùn)轉(zhuǎn)。

Components/app.js

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

Components/index.js

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

實(shí)踐過程的注意點(diǎn)

1.express無法執(zhí)行import 導(dǎo)致報(bào)錯(cuò)。

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

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

2.服務(wù)端渲染css或者scss文件時(shí)報(bào)錯(cuò)

解決方案：
因服務(wù)端直接運(yùn)行css或者scss等文件會導(dǎo)致語法報(bào)錯(cuò)，故在實(shí)際組件中，需要對require的scss文件進(jìn)行容錯(cuò)或者動態(tài)按需加載。

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

服務(wù)端渲染雖好，但是對項(xiàng)目的改造影響還是比較大的，改造需謹(jǐn)慎評估~

你懂的?。。?/p>

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

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