React 服務器端渲染和客戶端渲染效果對比

時間 2019-11-17

標籤 react 服務器渲染客戶端效果對比欄目 React 简体版

原文原文鏈接

最近在學習 React 的服務端渲染，因而使用 Express+React 寫了一個 Demo，用於對比和客戶端渲染的差別。github 地址css

先看一下效果吧（剛發佈貌似 easy-mock 官網就掛了，😂😂）：html

一、訪問服務器端渲染 Online Demo前端

二、咱們能夠看到，首屏數據很快的就顯示出來了，但是頁面的進度條卻還在加載中（由於客戶端 js 很大）。node

三、當進度條加載完成後，頁面才能進行交互操做（切換路由，登陸等）。react

四、查看網頁源代碼，頁面內容都在頁面中。ios

效果不明顯的話，能夠打開控制檯，在 Network 欄 Disable cache，而後刷新。nginx

經過此次簡單的訪問，咱們就能看出服務器端渲染的 2 大特色，首屏直出，SEO 友好。git

爲何要作服務器端渲染？

一、訪問客戶端渲染 Online Demogithub

二、咱們能夠看到，首屏至少等待了 6 秒才渲染出來，這對於通常的用戶，是難以容忍的。redux

三、不過一旦渲染完成，頁面就當即可交互了（切換路由，登陸等）。

四、查看網頁源代碼，頁面只有一個空 div 容器，而沒有實際內容。

經過此次訪問，咱們就能看出客戶端渲染的特色，首屏加載時間長，SEO 不友好，但可見便可操做。

其實咱們在訪問客戶端渲染的頁面時，請求到的只是一個 html 空殼，裏面引入了一個 js 文件，全部的內容都是經過 js 進行插入的，相似於這樣：

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>ssr</title>
  </head>
  <body>
    <div id="root"></div>
    <script src="bundle.js"></script>
  </body>
</html>
複製代碼

正是由於頁面是由 js 渲染出來的，因此會帶來以下幾個問題：

一、頁面要等待 js 加載，並執行完成了才能展現，在這期間頁面展示的是白屏。

二、爬蟲不能識別 js 內容，因此抓取不到任何數據，不利於 SEO 優化。

爲了解決這 2 個問題，咱們可使用服務器端渲染。

React 服務器端渲染流程

以前說道，客戶端渲染的頁面，請求到的是一個 html 空殼，而後經過 js 去渲染頁面。那若是請求到的直接是一個渲染好的頁面，是否是就能夠解決這 2 個問題了呢？

沒錯，服務器端渲染就是這個原理。

簡化流程

一、服務器端使用 renderToString 直接渲染出包含頁面信息的靜態 html。

二、客戶端根據渲染出的靜態 html 進行二次渲染，作一些綁定事件等操做。

服務器端沒有 DOM，Window 等概念，因此只能渲染出字符串，不能進行事件綁定，樣式渲染等。

只有第一次訪問頁面時才使用服務器端渲染，以後會被客戶端渲染接管。

開始寫代碼吧

接下來咱們一塊兒來寫一個 React 服務器端渲染 Demo。

編寫路由

這裏使用 react-router 對先後端代碼進行同構。

一、客戶端

使用 react-router-dom 下的 BrowserRouter 進行前端路由控制。

二、服務器端

使用 react-router-dom 下的 StaticRouter 進行靜態路由控制，具體操做以下：

使用 react-router-config 下的 matchRoutes 匹配後端路由，使用 renderRoutes 渲染匹配到的路由。
使用 react-router-dom/server 下的 renderToString 方法，渲染出 html 字符串，並返回給前端。

使用 StaticRouter 中經過 context 能夠和前端頁面通訊，傳參。

狀態管理

在 React 中，咱們經常使用 redux 來存儲數據，管理狀態。

一、客戶端

使用 redux 進行狀態管理，使用 react-redux 提供的 Provider 爲組件注入 store。

二、服務器端

和客戶端同樣，但每一次接收到請求需產生一個新的 store，避免多個用戶操做同一個 store。

數據請求

一、客戶端

使用 axios 在 componentDidMount 中請求數據。

二、服務器端

一樣使用 axios 去請求數據，可是服務器端不會觸發 componentDidMount 生命週期。咱們能夠在後端匹配到路由的時候，進行數據請求，並把數據存入 redux 中的 store，而後渲染出包含數據的 html 頁面，爲了不客戶端二次請求，服務器端向 window 中注入 REDUX_STORE 數據，客戶端直接使用此數據做爲客戶端 redux 的初始數據，以避免發生數據抖動。

具體操做以下：