React SSR - 寫個 Demo 一學就會

今天寫個小 Demo 來從頭實作一下 react 的 SSR，幫助理解 SSR 是如何實作的，有什么細節，

什么是 SSR

SSR 即 Server Side Rendering 服務端渲染，是指將網頁內容在服務器端中生成并發送到瀏覽器的技術，相比于客戶端渲染（CSR），SSR 一般用于以下場景：

SEO （搜索引擎優化）：由于部分搜索引擎對 CSR 內容支持不佳，所以 SSR 可以提升網站在搜索引擎結果中的排名，
首屏加載速度：由于 SSR 可以在服務器端生成完整的 HTML 頁面，用戶打開網頁時能夠更快地看到內容，不會看到長時間的白屏，可以提升用戶體驗，
隱藏某些資料：由于 CSR 需要從服務器將資料下載下來進行動態渲染，所以一些資料很容易被他人獲取，而 SSR 由于資料到渲染的程序在服務端實作，所以可以用來隱藏一些不想讓他人輕易獲得的資料，

如何實作

簡單的 SSR 其實實作很簡單，只需要在服務端匯入要渲染的組件，然后呼叫 react-dom/server 包中提供的 renderToString 方法將該組件的渲染內容輸出為字串后回傳客戶端即可，

Server 端的組件

下面寫一個簡單的例子：

服務端代碼：

import express from 'express';
import React from 'react';
import { renderToString } from 'react-dom/server';

import App from '../ui/App';

const app = express();

app.get('/', (_: unknown, res: express.Response) => {
    res.send(renderToString(<App />));
});

app.listen(4000, () => {
    console.log('Listening on port 4000');
});

此處要注意服務端需要支持 jsx 語法的決議，我這里直接使用 esno 執行 ts 代碼，在 tsconfig.json 中配置 jsx 即可，

其實看到這里就能明白為什么在 SSR 的頁面上使用 window、localstorage 等瀏覽器 API 需要放到 useEffect 里了，因為該頁面的組件都會被 server 端讀取決議，而 server 端并沒有這些 API，

然后看下 App 組件的代碼：

import React, { useCallback } from 'react';

export default () => {
    const log = useCallback(() => {
        console.log('Hello world');
    }, []);

    return (
        <div>
            <p>react ssr demo</p>
            <button onClick={log}>Click me</button>
        </div>
    );
};

啟動服務器后 server 端就會使用 renderToString 將 <App /> 渲染成 html 字串，然后通過 send 回傳給前端，下面就是服務端回傳的 html 內容：

<div>
    <p>react ssr demo</p>
    <button>Click me</button>
</div>

打開瀏覽器訪問該地址即可看到服務端回傳了該 html 片段：

hydrate 復活組件

如果你跟著上面的操作很快就會發現問題：為什么點按鈕沒法操作了？

其實原因很簡單，因為我們只拿到了一個 html 并沒有任何的 js，事件系結等自然是無法實作的，要復活組件的互動我們還需要很重要的一步 - hydrate 也就是常說的水合，

hydrate 即通過 react 將對應的組件重新渲染到 SSR 渲染的靜態內容上，類似于 render 差異點在于 render 會忽略 root 元素中現有的 dom 而 hydrate 則會復用并會進行內容匹配檢查，

Hydration failed because the initial UI does not match what was rendered on the server.

如果遇到上述錯誤即表示在客戶端執行 hydrate 時服務端回傳的初始的 dom 和 hydrate 接收到的需要進行渲染的 dom 不匹配，

說了這么多我們再來看下代碼如何撰寫，首先要進行 hydrate 我們需要客戶端的代碼來執行：

import React from 'react';
import { hydrateRoot } from 'react-dom/client';

import App from './App';

hydrateRoot(document.getElementById('root')!, <App />);

然后將該代碼進行編譯打包，我這里就直接使用 webpack 進行打包：

const path = require('path');

module.exports = {
    entry: './ui/index.tsx',
    output: {
        path: path.resolve(__dirname, 'static'),
        filename: 'bundle.js'
    },
    resolve: {
        extensions: ['.ts', '.tsx', '.js', '.jsx']
    },
    module: {
        rules: [
            {
                test: /\.(t|j)sx?$/,
                exclude: /node_modules/,
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-react', '@babel/preset-typescript']
                    }
                }
            }
        ]
    }
};

打包完成后生成一個 bundle.js 即可在客戶端使用它來進行 hydrate，

然后我們再修改下 server 端的代碼：

app.get('/', (_: unknown, res: express.Response) => {
    res.send(
        `
<div id="root">${renderToString(<App />)}</div>
<script src="https://www.cnblogs.com/bundle.js"></script>
`
    );
});

app.use(express.static('static'));

我們在靜態內容的外層套上 root 元素，然后在下方引入我們剛剛編譯的腳本，然后就可以在客戶端看到我們想要的結果：

可以看到事件可以正常觸發了，

此處還有個注意點，在 server 端要注意將靜態字串包裹在 root 元素中不要添加換行空格等，不然 react 在 hydrate 時依舊會因為內容不匹配而提示 Hydration failed（僅在 hydrateRoot 時出現，如果使用 hydrate 不會報錯，不過 18 中 hydrate 已經被棄用，）

動態資料

此時有些同學可能發現一些問題：前面的內容所渲染的內容都是靜態的，如果要針對用戶渲染出不同的內容比如用戶資訊等如何是好？

其實很簡單，只需要在服務端將對應的資訊作為 props 進行渲染即可，我們下面使用 userName 模擬一下：

app.get('/', (_: unknown, res: express.Response) => {
    const userName = ['張三', '李四', '王五', '趙六'][(Math.random() * 4) | 0];
    res.send(
        `
<div id="root">${renderToString(<App userName={userName} />)}</div>
<script src="https://www.cnblogs.com/bundle.js"></script>
`
    );
});

可是客戶端要如何與服務端匹配呢？此處有兩種解決方案：

客戶端獲取對應的資訊并在資訊獲取完成后再進行 hydrate 操作，
服務端將獲取到的資訊放在頁面中，

可以看出方案 1 會帶來明顯的延時，所以一般會采用方案 2，實作一般可以使用全域變數或特定標簽來實作：

app.get('/', (_: unknown, res: express.Response) => {
    const userName = ['張三', '李四', '王五', '趙六'][(Math.random() * 4) | 0];
    res.send(
        `
<div id="root">${renderToString(<App userName={userName} />)}</div>
<script>
window.__initialState = { userName: '${userName}' };
</script>
<script src="https://www.cnblogs.com/bundle.js"></script>
`
    );
});

import React from 'react';
import { hydrateRoot } from 'react-dom/client';

import App from './App';

hydrateRoot(document.getElementById('root')!, <App {...window.__initialState} />);

總結

React 中的 SSR 可以通過 renderToString 來實作，但是只能輸出靜態內容，要讓頁面支持互動需要搭配 hydrate 使用，
實作 SSR 時服務端需要支持 jsx 語法的決議，因為服務端也需要讀取組件，
hydrate 會檢查服務端與客戶端的內容是否匹配，
要實作動態資料需要在客戶端與服務端之間做好如何使用初始 props 的約定，

最后

本文的 demo 代碼放置在 React SSR Demo 中，可自行取閱，

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/555516.html

標籤：其他

上一篇：前端Vue非常簡單實用商品分類展示組件側邊商品分類組件

下一篇：返回列表