React 服务端渲染

React 服务端渲染#

服务端渲染（Server-Side Rendering，简称SSR）是指在服务器端生成HTML，然后将其发送到客户端的技术。与客户端渲染（Client-Side Rendering，简称CSR）相比，服务端渲染具有更好的首屏加载性能和SEO友好性。

1. 服务端渲染的优势#

更好的首屏加载性能：服务器直接生成HTML，客户端无需等待JavaScript加载和执行，首屏加载速度更快。
更好的SEO：搜索引擎爬虫可以直接读取服务器生成的HTML，有利于SEO。
更好的用户体验：用户可以更快地看到页面内容，减少等待时间。
支持无JavaScript环境：在禁用JavaScript的浏览器中，服务端渲染的页面仍然可以正常显示。

2. 服务端渲染的缺点#

服务器负载增加：服务器需要处理HTML生成的工作，增加了服务器的负载。
开发复杂度增加：服务端渲染需要处理前后端代码的兼容性，增加了开发的复杂度。
首字节时间（TTFB）可能增加：服务器需要生成HTML，可能会增加首字节时间。

3. 服务端渲染的实现方法#

3.1 使用Next.js#

Next.js是一个基于React的框架，提供了内置的服务端渲染支持，是实现React服务端渲染的最简单方法。

安装Next.js#

1
# 使用create-next-app创建项目
2
npx create-next-app@latest my-app
3

4
# 进入项目目录
5
cd my-app
6

7
# 启动开发服务器
8
npm run dev

创建服务端渲染页面#

在Next.js中，页面默认就是服务端渲染的。

1
import React from 'react';
2

3
export default function Home() {
4
  return (
5
    <div>
6
      <h1>Welcome to Next.js</h1>
7
      <p>This is a server-side rendered page.</p>
8
    </div>
9
  );
10
}

使用getServerSideProps#

getServerSideProps是Next.js提供的一个函数，用于在服务器端获取数据并传递给页面组件。

1
import React from 'react';
2

3
export default function Users({ users }) {
4
  return (
5
    <div>
6
      <h1>Users</h1>
7
      <ul>
8
        {users.map(user => (
9
          <li key={user.id}>{user.name}</li>
10
        ))}
11
      </ul>
12
    </div>
13
  );
14
}
15

16
// 在服务器端获取数据
17
export async function getServerSideProps() {
18
  // 从API获取数据
19
  const response = await fetch('https://jsonplaceholder.typicode.com/users');
20
  const users = await response.json();
21

22
  // 返回数据作为props
23
  return {
24
    props: { users }
25
  };
26
}

使用getStaticProps和getStaticPaths#

对于静态内容，Next.js提供了getStaticProps和getStaticPaths函数，用于在构建时生成静态HTML。

1
import React from 'react';
2

3
export default function Post({ post }) {
4
  return (
5
    <div>
6
      <h1>{post.title}</h1>
7
      <p>{post.body}</p>
8
    </div>
9
  );
10
}
11

12
// 在构建时获取数据
13
export async function getStaticProps({ params }) {
14
  const response = await fetch(`https://jsonplaceholder.typicode.com/posts/${params.id}`);
15
  const post = await response.json();
16

17
  return {
18
    props: { post }
19
  };
20
}
21

22
// 在构建时生成静态路径
23
export async function getStaticPaths() {
24
  const response = await fetch('https://jsonplaceholder.typicode.com/posts');
25
  const posts = await response.json();
26

27
  const paths = posts.map(post => ({
28
    params: { id: post.id.toString() }
29
  }));
30

31
  return {
32
    paths,
33
    fallback: false
34
  };
35
}

3.2 手动实现服务端渲染#

除了使用Next.js，我们也可以手动实现React的服务端渲染。

安装依赖#

1
npm install express react react-dom

创建服务器#

1
const express = require('express');
2
const React = require('react');
3
const ReactDOMServer = require('react-dom/server');
4
const App = require('./src/App').default;
5

6
const app = express();
7

8
// 静态文件服务
9
app.use(express.static('public'));
10

11
// 服务端渲染路由
12
app.get('*', (req, res) => {
13
  // 渲染React组件为HTML
14
  const html = ReactDOMServer.renderToString(<App />);
15

16
  // 构建完整的HTML页面
17
  const fullHtml = `
18
    <!DOCTYPE html>
19
    <html>
20
    <head>
21
      <title>React SSR</title>
22
    </head>
23
    <body>
24
      <div id="root">${html}</div>
25
      <script src="/bundle.js"></script>
26
    </body>
27
    </html>
28
  `;
29

30
  // 发送HTML到客户端
31
  res.send(fullHtml);
32
});
33

34
// 启动服务器
35
app.listen(3000, () => {
36
  console.log('Server is running on port 3000');
37
});

创建客户端代码#

1
import React from 'react';
2

3
function App() {
4
  return (
5
    <div>
6
      <h1>React Server Side Rendering</h1>
7
      <p>This is a server-side rendered React app.</p>
8
    </div>
9
  );
10
}
11

12
export default App;
13

14
// src/client.js
15
import React from 'react';
16
import ReactDOM from 'react-dom';
17
import App from './App';
18

19
// 客户端 hydration
20
ReactDOM.hydrate(<App />, document.getElementById('root'));

配置Webpack#

1
const path = require('path');
2

3
module.exports = {
4
  entry: './src/client.js',
5
  output: {
6
    path: path.resolve(__dirname, 'public'),
7
    filename: 'bundle.js'
8
  },
9
  module: {
10
    rules: [
11
      {
12
        test: /\.jsx?$/,
13
        exclude: /node_modules/,
14
        use: {
15
          loader: 'babel-loader',
16
          options: {
17
            presets: ['@babel/preset-react']
18
          }
19
        }
20
      }
21
    ]
22
  }
23
};

构建和运行#

1
# 构建客户端代码
2
npm run build
3

4
# 启动服务器
5
node server.js

4. 服务端渲染的最佳实践#

使用Next.js：Next.js提供了内置的服务端渲染支持，简化了开发过程，是实现React服务端渲染的首选方案。
合理使用数据获取方法：
- 对于静态内容，使用getStaticProps和getStaticPaths，在构建时生成静态HTML。
- 对于动态内容，使用getServerSideProps，在服务器端获取数据。
- 对于客户端特定的数据，使用客户端数据获取（如useEffect）。
优化服务器性能：
- 使用缓存减少重复计算。
- 优化数据库查询。
- 使用CDN缓存静态资源。
- 考虑使用服务器less架构。
处理错误：
- 在getServerSideProps和getStaticProps中处理错误。
- 使用Error Boundary处理客户端错误。
- 提供友好的错误页面。
优化首屏加载：
- 减少首屏的内容大小。
- 优化CSS和JavaScript的加载。
- 使用预加载和预连接。
处理状态管理：
- 对于服务端渲染的应用，需要确保状态在服务器端和客户端之间的一致性。
- 可以使用Redux、Zustand等状态管理库，并在服务器端初始化状态。
处理路由：
- 在Next.js中，使用文件系统路由，简化了路由的管理。
- 对于手动实现的服务端渲染，需要确保服务器端和客户端的路由一致。
测试服务端渲染：
- 测试服务器端渲染的HTML是否正确。
- 测试客户端hydration是否正常。
- 测试不同场景下的性能。

5. 服务端渲染与客户端渲染的结合#

在实际应用中，我们可以结合使用服务端渲染和客户端渲染，根据页面的特点选择合适的渲染方式。

首屏页面：使用服务端渲染，提高首屏加载速度和SEO友好性。
内部页面：使用客户端渲染，减少服务器负载。
静态内容：使用静态生成（SSG），在构建时生成静态HTML。
动态内容：使用服务端渲染（SSR），在服务器端获取数据并生成HTML。

6. 服务端渲染的未来#

随着Web技术的发展，服务端渲染也在不断演进。以下是一些服务端渲染的未来趋势：

边缘渲染：将渲染工作从中心服务器转移到边缘节点，减少延迟，提高性能。
增量静态再生：在构建后，可以通过增量静态再生更新静态页面，结合了静态生成和服务端渲染的优点。
React Server Components：React 18引入的新特性，允许在服务器端直接渲染组件，减少客户端JavaScript的大小。

练习#

使用Next.js创建一个服务端渲染的应用。
创建一个使用getServerSideProps获取数据的页面。
创建一个使用getStaticProps和getStaticPaths生成静态页面的应用。
手动实现一个React服务端渲染的应用。
比较服务端渲染和客户端渲染的性能差异。

总结#

在本章节中，我们学习了React服务端渲染的实现方法和最佳实践，包括：

服务端渲染的优势和缺点
使用Next.js实现服务端渲染
手动实现服务端渲染
服务端渲染的最佳实践
服务端渲染与客户端渲染的结合
服务端渲染的未来趋势

服务端渲染是提高React应用性能和SEO友好性的重要技术，特别是对于首屏加载速度和SEO要求较高的应用。通过合理使用服务端渲染，可以显著改善用户体验，提高应用的竞争力。

Lovely firefly!