创建简单的 React SSR 环境

前端

2023-11-28 10:10:40

我们已经知道，SSR（服务端渲染）是一个将网页在服务端直接渲染为 HTML，然后将渲染结果发送给浏览器，最后在浏览器中呈现的流程。

SSR 可以极大地提升页面的加载速度和改善用户体验，尤其是在页面内容较多或交互性较强的情况下。

在本文中，我们将手把手地教你如何构建一个简单的 React SSR 环境。

为什么我们需要 SSR

在了解如何构建 React SSR 环境之前，我们先来了解一下为什么我们需要 SSR。

传统的 SPA（单页应用）架构中，整个页面都是通过 JavaScript 在浏览器中动态渲染的。这会导致页面加载缓慢，尤其是对于首次加载和页面内容较多的情况。

SSR 可以解决这个问题。通过在服务端将页面渲染为 HTML，然后将 HTML 发送给浏览器，可以大大减少页面加载时间，提高页面性能。

构建 React SSR 环境

接下来，我们将一步一步地构建一个简单的 React SSR 环境。

1. 创建项目

首先，我们需要创建一个新的项目。你可以使用你喜欢的任何工具，例如 create-react-app 或 Vite。

npx create-react-app my-ssr-app

2. 安装必要的依赖项

接下来，我们需要安装必要的依赖项。

npm install react-dom/server babel-preset-react babel-preset-env @babel/core @babel/cli @babel/node

3. 配置 Babel

Babel 是一个 JavaScript 编译器，可以将现代 JavaScript 代码转换为浏览器可以理解的代码。我们需要配置 Babel，以便它能够将我们的 React 代码编译成可以在服务端运行的代码。

在项目根目录下创建一个名为 .babelrc 的文件，并添加以下内容：

{
  "presets": [
    "@babel/preset-react",
    "@babel/preset-env"
  ]
}

4. 创建服务端渲染函数

接下来，我们需要创建一个服务端渲染函数。这个函数将负责将 React 代码渲染成 HTML。

在项目根目录下创建一个名为 server.js 的文件，并添加以下内容：

const express = require('express');
const React = require('react');
const ReactDOMServer = require('react-dom/server');

const app = express();

app.get('/', (req, res) => {
  const html = ReactDOMServer.renderToString(<div>Hello World!</div>);
  res.send(`<!DOCTYPE html><html><body>${html}</body></html>`);
});

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