React服務端渲染（總結）

2019-11-19 16:12:42

字體：大中小

來源：轉載

供稿：網友

一、前言

為什么需要服務端渲染？什么情況下進行服務端渲染？筆者認為，當我們要求渲染時間盡量快、頁面響應速度快時（優點），才會采用服務器渲染，并且應該“按需”對頁面進行渲染 ――“首次加載/首屏”。即服務端渲染的優勢在于：由中間層( node端 )為客戶端請求初始數據、并由node渲染頁面。那客戶端渲染和服務端渲染有什么差別？服務端渲染究竟快在哪里呢？

二、原因與思路

客戶端渲染路線：1. 請求一個html -> 2. 服務端返回一個html -> 3. 瀏覽器下載html里面的js/css文件 -> 4. 等待js文件下載完成 -> 5. 等待js加載并初始化完成 -> 6. js代碼終于可以運行，由js代碼向后端請求數據( ajax/fetch ) -> 7. 等待后端數據返回 -> 8. react-dom( 客戶端 )從無到完整地，把數據渲染為響應頁面

服務端渲染路線：2. 請求一個html -> 2. 服務端請求數據( 內網請求快 ) -> 3. 服務器初始渲染（服務端性能好，較快） -> 4. 服務端返回已經有正確內容的頁面 -> 5. 客戶端請求js/css文件 -> 6. 等待js文件下載完成 -> 7. 等待js加載并初始化完成 -> 8. react-dom( 客戶端 )把剩下一部分渲染完成( 內容小，渲染快 )

說明：對同一個組件，服務端渲染“可視的”一部分( render/componentWillMount部分代碼 )，為確保組件有完善的生命周期及事件處理，客戶端需要再次渲染。即：服務端渲染，實際上也是需要客戶端進行再次地、但開銷很小的二次渲染。

時間耗時比較：

1. 數據請求：由服務端請求數據而不是客戶端請求數據，這是“快”的一個主要原因。服務端在內網進行請求，數據響應速度快?？蛻舳嗽诓煌W絡環境進行數據請求，且外網http請求開銷大，導致時間差（主要原因）。

2. 步驟：服務端是先請求數據然后渲染“可視”部分，而客戶端是等待js代碼下載、加載完成再請求數據、渲染。即：服務端渲染不用等待js代碼下載完成再請求數據，并會返回一個已經有內容的頁面。

3. 渲染性能：服務端性能比客戶端高，渲染速度快( 猜測，該項數據不詳 )。

4. 渲染內容：服務端渲染會把”可視“部分先渲染，然后交給客戶端再作部分渲染。而客戶端渲染，則是從無到有，需要經歷完整的渲染步驟。　　　　

三、注意事項與問題

0. 項目依賴什么？答：node端：express、react-dom/server、webpack。前端：React、mobx（一個更好的redux）、React-router、webpack

1. 前端/node端共用那部分代碼？答：node端/前端有各自的入口文件，server.js/client.js，通過react-router的路由配置文件routes.js作中間層

// routes.jsmodule.exports = (  <Route path="/" component={ IComponent } >    <Route path="/todo" component={ AComponent }>    </Route>  </Route>)

2. 代碼是由前后端共享，那如何分平臺地操作不同代碼？答：通過webpack。對共享代碼，進行不同平臺的，webpack(babel)編譯，通過在webpack.config.js中加入

 // webpack.client.config.jsplugins: [   new webpack.DefinePlugin({     '__isServer__': false,     '__isClient__': true   }) ]// webpack.server.config.jsplugins: [   new webpack.DefinePlugin({     '__isServer__': true,     '__isClient__': false   }) ]// xxx.jsif( __isServer__ ) {  ...}else { ... }

4. 組件的生命周期是如何的呢？答：componentWillMount( node端 ) -> render( node端 ) -> 客戶端生命周期和以前一樣

5. 拉取數據后如何處理呢？答：先在node端根據數據渲染好，再把數據隨頁面返回至前端，再由React根據數據進行渲染校對( 若前后端渲染結果不一致將報錯 )。應該在componentWillMount讓組件進行本地的數據同步

// 組件.jscomponentWillMount() {  if( __isClient__ ) {     this.todoStore.todos = window.initTodos;   }}  // node端返回`<!doctype html><html lang="utf-8">    <head>    <script> window.initTodo = ${...}</script>    </head>    <body> ... </body>    <script src="/static/vendor.js"></script>    <script src="/static/client.bundle.js"></script>

6. 前端/node端“入口文件”通過webpack構建有什么不同？答：前端是為了解析JSX與es6代碼（包括mobx的es6 decorator），node端除了以上，還需要加入babel-plugin-transform-runtime，是為了在node良好地運行es7 async / awatit

7. 如何保證node端能夠先請求數據然后再渲染？答：es7的async / await語法　　

8. 前端的react-router路由與node端路由如何配合？node如何知道該路由是渲染哪個數據呢？答：前端是以前的react-router配置，node端是react-router的match/RouterContext// 共享文件routes.js

const routes = (  <Route path="/" component={ IComponent } >    <Route path="/todo" component={ AComponent }>    </Route>  </Route>)// 前端入口文件client.jsrender(  <Router routes={ routes } history={ browserHistory } />,  ele)// node端入口文件server.jslet app = express();app.get('/todo', (req, res) => {  match({ routes: routes, location: req.url }, async (err, redirect, props) => {     // match會幫我們找到要渲染的組件鏈，注：上面一行使用了async語法，因此可以在render之前使用await運行拉取數據的代碼     let html = renderToString(<RouterContext {...props} />)     res.send( indexPage(html) )  }}) // node端返回   let indexPage = (html)=>{  return `  <!doctype html>    <html lang="utf-8">      <head>        <script>        </script>      </head>      <body>        <section id="hzpapp" >${html}</section>      </body>      <script src="/static/vendor.js"></script>      <script src="/static/client.bundle.js"></script>    </html>}

9. client.js中是否還能繼續使用webpack的require.ensure ? 答：可以。但閃白明顯，且node端返回html后會有報錯，在加載腳本后該錯誤能忽略?！?/p>

10. 若我使用的是mobx，該如何實例化store ? 答：每一個node請求，都應該返回一個新的獨立的store實例，而不是每個node請求共用一個store實例（筆者易犯）。