快捷導(dǎo)航

使用React?SSR寫Demo一學(xué)就會(huì)

更新時(shí)間：2023年06月19日 08:55:43 作者：嘿嘿不務(wù)正業(yè)

這篇文章主要為大家介紹了使用React?SSR寫Demo實(shí)現(xiàn)教程示例，有需要的朋友可以借鑒參考下，希望能夠有所幫助，祝大家多多進(jìn)步，早日升職加薪

引言

今天寫個(gè)小 Demo 來從頭實(shí)現(xiàn)一下 react 的 SSR，幫助理解 SSR 是如何實(shí)現(xiàn)的，有什么細(xì)節(jié)。

什么是 SSR

SSR 即 Server Side Rendering 服務(wù)端渲染，是指將網(wǎng)頁內(nèi)容在服務(wù)器端中生成并發(fā)送到瀏覽器的技術(shù)。相比于客戶端渲染（CSR），SSR 一般用于以下場景：

SEO （搜索引擎優(yōu)化）：由于部分搜索引擎對(duì) CSR 內(nèi)容支持不佳，所以 SSR 可以提升網(wǎng)站在搜索引擎結(jié)果中的排名。
首屏加載速度：由于 SSR 可以在服務(wù)器端生成完整的 HTML 頁面，用戶打開網(wǎng)頁時(shí)能夠更快地看到內(nèi)容，不會(huì)看到長時(shí)間的白屏，可以提升用戶體驗(yàn)。
隱藏某些數(shù)據(jù)：由于 CSR 需要從服務(wù)器將數(shù)據(jù)下載下來進(jìn)行動(dòng)態(tài)渲染，所以一些數(shù)據(jù)很容易被他人獲取，而 SSR 由于數(shù)據(jù)到渲染的過程在服務(wù)端實(shí)現(xiàn)，所以可以用來隱藏一些不想讓他人輕易獲得的數(shù)據(jù)。

如何實(shí)現(xiàn)

簡單的 SSR 其實(shí)實(shí)現(xiàn)很簡單，只需要在服務(wù)端導(dǎo)入要渲染的組件，然后調(diào)用 react-dom/server 包中提供的 renderToString 方法將該組件的渲染內(nèi)容輸出為字符串后返回客戶端即可。

Server 端的組件

下面寫一個(gè)簡單的例子：

服務(wù)端代碼：

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');
});

此處要注意服務(wù)端需要支持 jsx 語法的解析，我這里直接使用 esno 執(zhí)行 ts 代碼，在 tsconfig.json 中配置 jsx 即可。

其實(shí)看到這里就能明白為什么在 SSR 的頁面上使用 window、localstorage 等瀏覽器 API 需要放到 useEffect 里了，因?yàn)樵擁撁娴慕M件都會(huì)被 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>
    );
};

啟動(dòng)服務(wù)器后 server 端就會(huì)使用 renderToString 將 <App /> 渲染成 html 字符串，然后通過 send 返回給前端，下面就是服務(wù)端返回的 html 內(nèi)容：

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

打開瀏覽器訪問該地址即可看到服務(wù)端返回了該 html 片段：

hydrate 復(fù)活組件

如果你跟著上面的操作很快就會(huì)發(fā)現(xiàn)問題：為什么點(diǎn)按鈕沒法操作了？

其實(shí)原因很簡單，因?yàn)槲覀冎荒玫搅艘粋€(gè) html 并沒有任何的 js，事件綁定等自然是無法實(shí)現(xiàn)的，要復(fù)活組件的交互我們還需要很重要的一步 - hydrate 也就是常說的水合。

hydrate 即通過 react 將對(duì)應(yīng)的組件重新渲染到 SSR 渲染的靜態(tài)內(nèi)容上，類似于 render 差異點(diǎn)在于 render 會(huì)忽略 root 元素中現(xiàn)有的 dom 而 hydrate 則會(huì)復(fù)用并會(huì)進(jìn)行內(nèi)容匹配檢查。

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

如果遇到上述錯(cuò)誤即表示在客戶端執(zhí)行 hydrate 時(shí)服務(wù)端返回的初始的 dom 和 hydrate 接收到的需要進(jìn)行渲染的 dom 不匹配。

說了這么多我們再來看下代碼如何編寫，首先要進(jìn)行 hydrate 我們需要客戶端的代碼來執(zhí)行：

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root')!, <App />);

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

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']
                    }
                }
            }
        ]
    }
};

打包完成后生成一個(gè) bundle.js 即可在客戶端使用它來進(jìn)行 hydrate。

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

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

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

可以看到事件可以正常觸發(fā)了。

此處還有個(gè)注意點(diǎn)，在 server 端要注意將靜態(tài)字符串包裹在 root 元素中不要添加換行空格等，不然 react 在 hydrate 時(shí)依舊會(huì)因?yàn)閮?nèi)容不匹配而提示 Hydration failed（僅在 hydrateRoot 時(shí)出現(xiàn)，如果使用 hydrate 不會(huì)報(bào)錯(cuò)，不過 18 中 hydrate 已經(jīng)被棄用。）

動(dòng)態(tài)數(shù)據(jù)

此時(shí)有些同學(xué)可能發(fā)現(xiàn)一些問題：前面的內(nèi)容所渲染的內(nèi)容都是靜態(tài)的，如果要針對(duì)用戶渲染出不同的內(nèi)容比如用戶信息等如何是好？

其實(shí)很簡單，只需要在服務(wù)端將對(duì)應(yīng)的信息作為 props 進(jìn)行渲染即可，我們下面使用 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="/bundle.js"></script>
`
    );
});

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

客戶端獲取對(duì)應(yīng)的信息并在信息獲取完成后再進(jìn)行 hydrate 操作。
服務(wù)端將獲取到的信息放在頁面中。

可以看出方案 1 會(huì)帶來明顯的延時(shí)，所以一般會(huì)采用方案 2，實(shí)現(xiàn)一般可以使用全局變量或特定標(biāo)簽來實(shí)現(xiàn)：

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="/bundle.js"></script>
`
    );
});

import React from 'react';
import { hydrateRoot } from 'react-dom/client';
import App from './App';
hydrateRoot(document.getElementById('root')!, <App {...window.__initialState} />);

總結(jié)

React 中的 SSR 可以通過 renderToString 來實(shí)現(xiàn)，但是只能輸出靜態(tài)內(nèi)容，要讓頁面支持交互需要搭配 hydrate 使用。
實(shí)現(xiàn) SSR 時(shí)服務(wù)端需要支持 jsx 語法的解析，因?yàn)榉?wù)端也需要讀取組件。
hydrate 會(huì)檢查服務(wù)端與客戶端的內(nèi)容是否匹配。
要實(shí)現(xiàn)動(dòng)態(tài)數(shù)據(jù)需要在客戶端與服務(wù)端之間做好如何使用初始 props 的約定。