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

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

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

兩種渲染方式的利弊

客戶端渲染 ：

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

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

• 優(yōu)點(diǎn)
  1. 更好的 SEO，因?yàn)樵诤蠖擞型暾?HTML 頁(yè)面奕坟，所以爬蟲(chóng)更容易爬取關(guān)鍵信息祥款。
  2. 首屏渲染速度快，用戶體驗(yàn)更好月杉。
  3. 無(wú)需占用客戶端資源刃跛，即解析模板的工作完全交由后端來(lái)做，客戶端只要解析標(biāo)準(zhǔn)的 HTML 頁(yè)面即可苛萎，這樣對(duì)于客戶端的資源占用更少桨昙，尤其是移動(dòng)端跌帐，也可以更省電。
  4. 后端生成生成緩存片段绊率，這樣就可以減少數(shù)據(jù)庫(kù)查詢浪費(fèi)的時(shí)間了谨敛，且對(duì)于數(shù)據(jù)變化不大的頁(yè)面非常高效 。
• 缺點(diǎn)
  1. 不利于前后端分離滤否，開(kāi)發(fā)效率低脸狸。使用服務(wù)器端渲染，則無(wú)法進(jìn)行分工合作藐俺，則對(duì)于前端復(fù)雜度高的項(xiàng)目炊甲，不利于項(xiàng)目高效開(kāi)發(fā)。
  2. 服務(wù)器壓力變大欲芹，因?yàn)?React 代碼由服務(wù)端執(zhí)行并生成完成頁(yè)面卿啡，當(dāng)外部訪問(wèn)量增多，可能會(huì)出現(xiàn)頁(yè)面加載變慢( 請(qǐng)求阻塞 )等情況菱父，此時(shí)可以通過(guò)負(fù)載均衡策略解決颈娜。

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

導(dǎo)讀：

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

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

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

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

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 對(duì)客戶端入口文件進(jìn)行打包

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 對(duì)公共代碼抽離

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 文件中配置熱更新，即一旦代碼有變裙品，則重新打包編譯展示到頁(yè)面

  "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()進(jìn)行 SSR俗批，至此 React 代碼確實(shí)進(jìn)行了服務(wù)端渲染，頁(yè)面也展示出來(lái)了市怎，但是其中是存在很大問(wèn)題的岁忘，那么是什么問(wèn)題呢？這里大家可以去學(xué)習(xí)一下 同構(gòu) 的相關(guān)知識(shí)焰轻，沒(méi)有同構(gòu)的 SSR 只是簡(jiǎn)單的進(jìn)行 HTML 代碼片段的生成而其中綁定的事件只有在瀏覽器端執(zhí)行才會(huì)生效

總結(jié)

• 什么項(xiàng)目才適合 SSR
  1. 項(xiàng)目要求SEO臭觉，SSR 就很合適 ( 關(guān)于 SEO昆雀，預(yù)渲染也能做到 )
  2. 需求項(xiàng)目某頁(yè)面首屏?xí)r間要求很快辱志，SSR 可以減少白屏?xí)r間
  3. 首屏頁(yè)數(shù)據(jù)請(qǐng)求多