从零构建 React 服务器端渲染：精简、高效、省时

2024-02-08 21:33:44

正文

React 服务器端渲染 (SSR) 入门

React 服务器端渲染 (SSR) 是一种强大技术，允许您在服务器上预先渲染 React 组件，然后将预渲染后的 HTML 发送给浏览器。这可以显著提高初始页面加载速度，尤其是在处理复杂或数据密集型应用程序时。此外，SSR 还可以改善搜索引擎优化 (SEO)，因为搜索引擎能够抓取和索引预渲染后的 HTML 内容。

从零开始构建 React SSR 项目

现在，让我们从零开始构建一个简单的 React SSR 项目。我们将使用 Create React App (CRA) 工具来快速搭建项目框架。CRA 是一个命令行工具，可以轻松创建一个新的 React 项目，并且它已经预配置了所有必要的构建工具。

安装 Create React App

首先，在您的终端中输入以下命令安装 Create React App：
```
npm install -g create-react-app
```
创建一个新的 React 项目

接下来，创建一个新的 React 项目：
```
create-react-app my-react-ssr-app
```
这将在当前目录中创建一个名为 my-react-ssr-app 的新项目。
安装必要的依赖项

为了启用 SSR，我们需要安装一些必要的依赖项：
```
npm install react-dom/server
npm install express
```

创建服务器端渲染文件

接下来，我们需要创建一个文件来处理服务器端渲染逻辑。通常情况下，这个文件被称为 server.js 或 index.js。在这个示例中，我们将其命名为 server.js：

const express = require('express');
const app = express();

const port = 3000;

app.get('/', (req, res) => {
  res.send('Hello, world!');
});

app.listen(port, () => {
  console.log(`Server listening on port ${port}`);
});

配置 webpack

为了支持服务器端渲染，我们需要对 webpack 进行一些配置。打开项目中的 webpack.config.js 文件，并在其中添加以下代码：
```
module.exports = {
  // ...其他配置
  target: 'node',
  // ...其他配置
};
```
运行服务器端渲染脚本

现在，我们可以运行服务器端渲染脚本：
```
node server.js
```
这将启动一个服务器，监听端口 3000。
在客户端渲染应用程序

最后，我们需要在客户端渲染应用程序。打开项目中的 index.js 文件，并在其中添加以下代码：
```
import React from 'react';
import ReactDOM from 'react-dom';

ReactDOM.render(<h1>Hello, world!</h1>, document.getElementById('root'));
```