客戶端渲染和服務(wù)端渲染

客戶端渲染 ：
顧名思義即 React 代碼在客戶端渲染執(zhí)行，當項目啟動首次請求服務(wù)端時服務(wù)端僅返回一個 HTML 頁面骨架，也就是我們所看到的項目入口文件( index.html )， 客戶端收到后再根據(jù)其中的 JS 文件進行整個應(yīng)用頁的渲染；

服務(wù)端渲染 ：
即 React 代碼在服務(wù)端上運行，直接生成帶有數(shù)據(jù)的 HTML 頁面（ ajax 請求均在服務(wù)器上完成 ），然后直接將該頁面返回給客戶端，客戶端只需解析 HTML 就能展示頁面。

兩種渲染方式的利弊

客戶端渲染 ：

• 優(yōu)點：
  1. 前后端分離。前端專注于頁面開發(fā)，后端專注于 API 開發(fā)，且前端有更多的選擇性，而不需要遵循后端特定的模板。
  2. 前端代碼容易維護，降低于服務(wù)器的耦合度，減少服務(wù)器端負載，降低服務(wù)器響應(yīng)流。
• 缺點：
  1. 首屏渲染速度慢，向服務(wù)器請求完 HTML 骨架后由瀏覽器下載 JS 文件并進行 React代碼解析生成 DOM 片段拼裝到 HTML 骨架中。
  2. 不利于 SEO，搜索引擎爬蟲爬的是服務(wù)端中生成的頁面內(nèi)容。

服務(wù)端渲染( 后端 ) ：

• 優(yōu)點
  1. 更好的 SEO，因為在后端有完整的 HTML 頁面，所以爬蟲更容易爬取關(guān)鍵信息。
  2. 首屏渲染速度快，用戶體驗更好。
  3. 無需占用客戶端資源，即解析模板的工作完全交由后端來做，客戶端只要解析標準的 HTML 頁面即可，這樣對于客戶端的資源占用更少，尤其是移動端，也可以更省電。
  4. 后端生成生成緩存片段，這樣就可以減少數(shù)據(jù)庫查詢浪費的時間了，且對于數(shù)據(jù)變化不大的頁面非常高效 。
• 缺點
  1. 不利于前后端分離，開發(fā)效率低。使用服務(wù)器端渲染，則無法進行分工合作，則對于前端復(fù)雜度高的項目，不利于項目高效開發(fā)。
  2. 服務(wù)器壓力變大，因為 React 代碼由服務(wù)端執(zhí)行并生成完成頁面，當外部訪問量增多，可能會出現(xiàn)頁面加載變慢( 請求阻塞 )等情況，此時可以通過負載均衡策略解決。

React + Express 構(gòu)建服務(wù)端渲染案例

導(dǎo)讀：

凡涉及到項目工程化，Webpack 配置肯定跑不掉（ 所以建議學習一下Webpack相關(guān)基礎(chǔ) ），本案例需要安裝npm-run-all 和 nodemon 全局模塊，生產(chǎn)環(huán)境依賴如下：

案例構(gòu)建思路：

Tips： server.js 代表 server目錄下 index.js，client.js 代表 client 目錄下 index.js，整體目錄結(jié)構(gòu)：

1. 創(chuàng)建服務(wù)端入口文件 server.js 并利用 express 的實例創(chuàng)建服務(wù)器
2. 創(chuàng)建客戶端入口文件 client.js 并引入一些簡單的 React 組件
   注意：組件渲染時如果同構(gòu)則需使用ReactDom.hydrate()，否則可以使用ReactDom.render();
3. 創(chuàng)建配置文件 webpack.server.js 對服務(wù)端入口文件進行打包

const path = require('path');
const config = require('./webpack.base.js');
const merge = require('webpack-merge');
const nodeExternals = require('webpack-node-externals');

const serverConfig =  {
    target: 'node',
    mode: 'development',
    entry: './src/server/index.js',
    externals: [nodeExternals()],
    output: {
        filename: 'bundle.js',
        path: path.resolve(__dirname, 'build')
    }
};

module.exports = merge(config, serverConfig);

4. 創(chuàng)建配置文件 webpack.client.js 對客戶端入口文件進行打包

const path = require('path');
const config = require('./webpack.base.js');
const merge = require('webpack-merge');

const clientConfig = {
    mode: 'development',
    entry: './src/client/index.js',
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, 'public')
    }
};

module.exports = merge(config, clientConfig);

5. 創(chuàng)建配置文件 webpack.base.js 對公共代碼抽離

module.exports = {
    module: {
        rules: [{
            test: /\.js?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            options: {
                presets: ['@babel/react', ['@babel/env', {
                    targets: {
                        browsers: ['last 2 versions']
                    }
                }]]
            }
        }]
    }
}

6. 在 package.json 文件中配置熱更新，即一旦代碼有變，則重新打包編譯展示到頁面

  "scripts": {
    "dev": "npm-run-all --parallel dev:**",
    "dev:start": "nodemon \"./build/bundle.js\"",
    "dev:build:server": "webpack --config webpack.server.js --watch",
    "dev:build:client": "webpack --config webpack.client.js --watch"
  }

7. 在 server.js 引入 client.js 并利用 renderToString()進行 SSR，至此 React 代碼確實進行了服務(wù)端渲染，頁面也展示出來了，但是其中是存在很大問題的，那么是什么問題呢？這里大家可以去學習一下 同構(gòu) 的相關(guān)知識，沒有同構(gòu)的 SSR 只是簡單的進行 HTML 代碼片段的生成而其中綁定的事件只有在瀏覽器端執(zhí)行才會生效

總結(jié)

• 什么項目才適合 SSR
  1. 項目要求SEO，SSR 就很合適 ( 關(guān)于 SEO，預(yù)渲染也能做到 )
  2. 需求項目某頁面首屏時間要求很快，SSR 可以減少白屏時間
  3. 首屏頁數(shù)據(jù)請求多