React項(xiàng)目中服務(wù)器端渲染SSR的實(shí)現(xiàn)與優(yōu)化詳解

更新時間：2025年03月25日 09:39:23 作者：前端大白話

在傳統(tǒng)的 React 項(xiàng)目里,頁面的渲染工作是在瀏覽器里完成的,而服務(wù)器端渲染（SSR）則是讓服務(wù)器先把 React 組件渲染成 HTML 字符串,再把這個 HTML 字符串發(fā)送給瀏覽器,下面我們就來看看具體實(shí)現(xiàn)方法吧

什么是服務(wù)器端渲染（SSR）

在傳統(tǒng)的 React 項(xiàng)目里，頁面的渲染工作是在瀏覽器里完成的。也就是當(dāng)你訪問一個網(wǎng)頁時，瀏覽器會先下載 HTML、CSS 和 JavaScript 文件，接著運(yùn)行 JavaScript 代碼來生成頁面內(nèi)容。而服務(wù)器端渲染（SSR）則是讓服務(wù)器先把 React 組件渲染成 HTML 字符串，再把這個 HTML 字符串發(fā)送給瀏覽器。這樣一來，瀏覽器就能直接顯示已經(jīng)渲染好的頁面，不用再等待 JavaScript 代碼運(yùn)行了。

SSR 的優(yōu)勢

更快的初始加載速度：因?yàn)闉g覽器拿到的是已經(jīng)渲染好的 HTML，所以能更快地顯示頁面內(nèi)容，減少用戶等待時間。

更好的 SEO：搜索引擎爬蟲可以直接讀取服務(wù)器返回的 HTML 內(nèi)容，有利于網(wǎng)站在搜索引擎中的排名。

更好的用戶體驗(yàn)：特別是在網(wǎng)絡(luò)較慢的情況下，用戶能更快地看到頁面內(nèi)容，提升體驗(yàn)。

如何在 React 項(xiàng)目中進(jìn)行 SSR

下面我會一步步教你如何在 React 項(xiàng)目中實(shí)現(xiàn) SSR。

1. 創(chuàng)建 React 項(xiàng)目

首先，你得創(chuàng)建一個新的 React 項(xiàng)目?？梢允褂?create-react-app 來創(chuàng)建：

npx create-react-app my-ssr-app
cd my-ssr-app

2. 安裝必要的依賴

我們需要安裝一些額外的依賴，像 express 用于創(chuàng)建服務(wù)器，react-dom/server 用于在服務(wù)器端渲染 React 組件。

npm install express react-dom

3. 修改項(xiàng)目結(jié)構(gòu)

在項(xiàng)目根目錄下創(chuàng)建一個 server.js 文件，這個文件將用于創(chuàng)建服務(wù)器和處理 SSR。

4. 編寫 server.js 文件

下面是 server.js 文件的詳細(xì)代碼，每一行都有注釋：

// 引入 express 模塊，用于創(chuàng)建服務(wù)器
const express = require('express');
// 創(chuàng)建一個 express 應(yīng)用實(shí)例
const app = express();
// 引入 React 庫
const React = require('react');
// 引入 ReactDOMServer 用于在服務(wù)器端渲染 React 組件
const ReactDOMServer = require('react-dom/server');
// 引入 App 組件，這里假設(shè)你的主組件是 App
const App = require('./src/App').default;

// 處理根路徑的請求
app.get('/', (req, res) => {
    // 使用 ReactDOMServer.renderToString 方法將 App 組件渲染成 HTML 字符串
    const html = ReactDOMServer.renderToString(<App />);
    // 定義一個完整的 HTML 頁面模板，將渲染好的 HTML 字符串插入到模板中
    const page = `
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>My SSR App</title>
        </head>
        <body>
            <!-- 插入渲染好的 HTML 字符串 -->
            <div id="root">${html}</div>
            <!-- 引入客戶端的 JavaScript 文件 -->
            <script src="/static/js/bundle.js"></script>
        </body>
        </html>
    `;
    // 將完整的 HTML 頁面發(fā)送給客戶端
    res.send(page);
});

// 監(jiān)聽 3001 端口，啟動服務(wù)器
const port = 3001;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

5. 修改 src/index.js 文件

在 src/index.js 文件中，我們需要使用 hydrateRoot 方法來將服務(wù)器端渲染的 HTML 與客戶端的 React 代碼進(jìn)行關(guān)聯(lián)。

// 引入 React 庫
import React from 'react';
// 引入 ReactDOM 用于在客戶端渲染 React 組件
import ReactDOM from 'react-dom/client';
// 引入 App 組件
import App from './App';

// 獲取 id 為 root 的 DOM 元素
const rootElement = document.getElementById('root');
// 使用 hydrateRoot 方法將服務(wù)器端渲染的 HTML 與客戶端的 React 代碼進(jìn)行關(guān)聯(lián)
const root = ReactDOM.hydrateRoot(rootElement, <App />);

6. 運(yùn)行項(xiàng)目

首先，啟動服務(wù)器：

node server.js

然后，在瀏覽器中訪問 http://localhost:3001，你就可以看到已經(jīng)使用 SSR 渲染的頁面了。

總結(jié)

通過以上步驟，你就可以在 React 項(xiàng)目中實(shí)現(xiàn)服務(wù)器端渲染（SSR）了。SSR 能帶來更快的初始加載速度、更好的 SEO 和用戶體驗(yàn)。希望這個教程能幫助你理解和實(shí)現(xiàn) SSR。

如何優(yōu)化React項(xiàng)目的服務(wù)器端渲染性能

在 React 項(xiàng)目里，優(yōu)化服務(wù)器端渲染（SSR）性能可從多方面著手，下面是一些實(shí)用的優(yōu)化方法和對應(yīng)的代碼示例。

1. 代碼分割

代碼分割能減少初始加載的 JavaScript 代碼量，讓頁面更快加載。在 React 中，可使用 React.lazy 和 Suspense 來實(shí)現(xiàn)。

// 假設(shè)這是你的路由配置文件
import React, { lazy, Suspense } from 'react';
import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';

// 懶加載組件
const Home = lazy(() => import('./pages/Home'));
const About = lazy(() => import('./pages/About'));

const App = () => {
    return (
        <Router>
            <Suspense fallback={<div>Loading...</div>}>
                <Routes>
                    <Route path="/" element={<Home />} />
                    <Route path="/about" element={<About />} />
                </Routes>
            </Suspense>
        </Router>
    );
};

???????export default App;

上述代碼借助 React.lazy 來懶加載組件，Suspense 則在組件加載期間顯示加載提示。

2. 緩存機(jī)制

使用緩存可避免對相同內(nèi)容的重復(fù)渲染，提升服務(wù)器性能。在 Node.js 服務(wù)器中，可使用 lru-cache 來實(shí)現(xiàn)簡單的緩存。

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');
const LRU = require('lru-cache');
const App = require('./src/App').default;

const app = express();
// 創(chuàng)建一個 LRU 緩存實(shí)例，最大緩存項(xiàng)數(shù)為 100
const cache = new LRU({ max: 100 });

app.get('/', (req, res) => {
    const cacheKey = req.url;
    // 檢查緩存中是否存在該 URL 的渲染結(jié)果
    if (cache.has(cacheKey)) {
        const cachedHtml = cache.get(cacheKey);
        return res.send(cachedHtml);
    }

    const html = ReactDOMServer.renderToString(<App />);
    // 將渲染結(jié)果存入緩存
    cache.set(cacheKey, html);
    res.send(`
        <!DOCTYPE html>
        <html lang="en">
        <head>
            <meta charset="UTF-8">
            <meta name="viewport" content="width=device-width, initial-scale=1.0">
            <title>My SSR App</title>
        </head>
        <body>
            <div id="root">${html}</div>
            <script src="/static/js/bundle.js"></script>
        </body>
        </html>
    `);
});

const port = 3001;
app.listen(port, () => {
    console.log(`Server is running on port ${port}`);
});

此代碼利用 lru-cache 來緩存渲染結(jié)果，若緩存中存在請求的 URL 對應(yīng)的渲染結(jié)果，就直接返回緩存內(nèi)容。

3. 異步數(shù)據(jù)獲取優(yōu)化

在 SSR 中，異步數(shù)據(jù)獲取是性能瓶頸之一?？墒褂?React Query 或 SWR 等庫來優(yōu)化數(shù)據(jù)獲取。

import React from 'react';
import { useQuery } from 'react-query';

// 模擬異步數(shù)據(jù)獲取函數(shù)
const fetchData = async () => {
    const response = await fetch('https://api.example.com/data');
    return response.json();
};

const MyComponent = () => {
    // 使用 useQuery 進(jìn)行數(shù)據(jù)獲取
    const { data, isLoading, error } = useQuery('myData', fetchData);

    if (isLoading) return <div>Loading...</div>;
    if (error) return <div>Error: {error.message}</div>;

    return (
        <div>
            {data.map(item => (
                <div key={item.id}>{item.name}</div>
            ))}
        </div>
    );
};

export default MyComponent;

上述代碼使用 React Query 的 useQuery 鉤子來進(jìn)行數(shù)據(jù)獲取，它會自動處理緩存、重試等操作。

4. 服務(wù)器優(yōu)化

合理配置服務(wù)器資源也很關(guān)鍵，可使用 pm2 來管理 Node.js 進(jìn)程，保證服務(wù)器的高可用性和性能。

# 全局安裝 pm2
npm install -g pm2
# 使用 pm2 啟動服務(wù)器
pm2 start server.js

5. 優(yōu)化 CSS 加載

采用 CSS-in-JS 或 extract-text-webpack-plugin 等工具，將 CSS 提取到單獨(dú)的文件中，避免內(nèi)聯(lián) CSS 帶來的性能問題。

// 在 webpack 配置中使用 MiniCssExtractPlugin 提取 CSS
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

???????module.exports = {
    // 其他配置...
    module: {
        rules: [
            {
                test: /\.css$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader'
                ]
            }
        ]
    },
    plugins: [
        new MiniCssExtractPlugin({
            filename: '[name].[contenthash].css'
        })
    ]
};

上述代碼借助 MiniCssExtractPlugin 把 CSS 提取到單獨(dú)的文件中。

通過以上這些方法，能顯著優(yōu)化 React 項(xiàng)目的服務(wù)器端渲染性能。

以上就是React項(xiàng)目中服務(wù)器端渲染SSR的實(shí)現(xiàn)與優(yōu)化詳解的詳細(xì)內(nèi)容，更多關(guān)于React服務(wù)器渲染SSR的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: