大白话如何在 React 项目中进行服务器端渲染（SSR），它有什么优势
什么是服务器端渲染（SSR）
在传统的 React 项目里，页面的渲染工作是在浏览器里完成的。也就是当你访问一个网页时，浏览器会先下载 HTML、CSS 和 JavaScript 文件，接着运行 JavaScript 代码来生成页面内容。而服务器端渲染（SSR）则是让服务器先把 React 组件渲染成 HTML 字符串，再把这个 HTML 字符串发送给浏览器。这样一来，浏览器就能直接显示已经渲染好的页面，不用再等待 JavaScript 代码运行了。
SSR 的优势
- 更快的初始加载速度：因为浏览器拿到的是已经渲染好的 HTML，所以能更快地显示页面内容，减少用户等待时间。
- 更好的 SEO：搜索引擎爬虫可以直接读取服务器返回的 HTML 内容，有利于网站在搜索引擎中的排名。
- 更好的用户体验：特别是在网络较慢的情况下，用户能更快地看到页面内容，提升体验。
如何在 React 项目中进行 SSR
下面我会一步步教你如何在 React 项目中实现 SSR。
1. 创建 React 项目
首先，你得创建一个新的 React 项目。可以使用 create-react-app 来创建：
npx create-react-app my-ssr-app
cd my-ssr-app
2. 安装必要的依赖
我们需要安装一些额外的依赖，像 express 用于创建服务器，react-dom/server 用于在服务器端渲染 React 组件。
npm install express react-dom
3. 修改项目结构
在项目根目录下创建一个 server.js 文件，这个文件将用于创建服务器和处理 SSR。
4. 编写 server.js 文件
下面是 server.js 文件的详细代码，每一行都有注释：
// 引入 express 模块，用于创建服务器
const express = require('express');
// 创建一个 express 应用实例
const app = express();
// 引入 React 库
const React = require('react');
// 引入 ReactDOMServer 用于在服务器端渲染 React 组件
const ReactDOMServer = require('react-dom/server');
// 引入 App 组件，这里假设你的主组件是 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 页面发送给客户端
res.send(page);
});
// 监听 3001 端口，启动服务器
const port = 3001;
app.listen(port, () => {
console.log(`Server is running on port ${port}`);
});
5. 修改 src/index.js 文件
在 src/index.js 文件中，我们需要使用 hydrateRoot 方法来将服务器端渲染的 HTML 与客户端的 React 代码进行关联。
// 引入 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 方法将服务器端渲染的 HTML 与客户端的 React 代码进行关联
const root = ReactDOM.hydrateRoot(rootElement, <App />);
6. 运行项目
首先，启动服务器：
node server.js
然后，在浏览器中访问 http://localhost:3001，你就可以看到已经使用 SSR 渲染的页面了。
总结
通过以上步骤，你就可以在 React 项目中实现服务器端渲染（SSR）了。SSR 能带来更快的初始加载速度、更好的 SEO 和用户体验。希望这个教程能帮助你理解和实现 SSR。
如何优化React项目的服务器端渲染性能？
在 React 项目里，优化服务器端渲染（SSR）性能可从多方面着手，下面是一些实用的优化方法和对应的代码示例。
1. 代码分割
代码分割能减少初始加载的 JavaScript 代码量，让页面更快加载。在 React 中，可使用 React.lazy 和 Suspense 来实现。
// 假设这是你的路由配置文件
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. 缓存机制
使用缓存可避免对相同内容的重复渲染，提升服务器性能。在 Node.js 服务器中，可使用 lru-cache 来实现简单的缓存。
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();
// 创建一个 LRU 缓存实例，最大缓存项数为 100
const cache = new LRU({ max: 100 });
app.get('/', (req, res) => {
const cacheKey = req.url;
// 检查缓存中是否存在该 URL 的渲染结果
if (cache.has(cacheKey)) {
const cachedHtml = cache.get(cacheKey);
return res.send(cachedHtml);
}
const html = ReactDOMServer.renderToString(<App />);
// 将渲染结果存入缓存
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 来缓存渲染结果，若缓存中存在请求的 URL 对应的渲染结果，就直接返回缓存内容。
3. 异步数据获取优化
在 SSR 中，异步数据获取是性能瓶颈之一。可使用 React Query 或 SWR 等库来优化数据获取。
import React from 'react';
import { useQuery } from 'react-query';
// 模拟异步数据获取函数
const fetchData = async () => {
const response = await fetch('https://api.example.com/data');
return response.json();
};
const MyComponent = () => {
// 使用 useQuery 进行数据获取
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 钩子来进行数据获取，它会自动处理缓存、重试等操作。
4. 服务器优化
合理配置服务器资源也很关键，可使用 pm2 来管理 Node.js 进程，保证服务器的高可用性和性能。
# 全局安装 pm2
npm install -g pm2
# 使用 pm2 启动服务器
pm2 start server.js
5. 优化 CSS 加载
采用 CSS-in-JS 或 extract-text-webpack-plugin 等工具，将 CSS 提取到单独的文件中，避免内联 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 提取到单独的文件中。
通过以上这些方法，能显著优化 React 项目的服务器端渲染性能。