手把手带你学会 React SSR-JavaScript中文网-JavaScript教程资源分享门户

React SSR 是指使用 React 组件在服务端渲染出 HTML 页面，在前端页面加载时就已经获取到了完整的 HTML 页面，提升了页面的渲染速度和 SEO 优化效果。本文将手把手地带你学会 React SSR，帮助你更深入地了解这一技术，并通过代码示例进行指导。

前置知识

在学习本文前，你需要掌握以下技术：

React 基础知识，包括组件和生命周期等
Node.js 的基础知识和 Express 框架的使用
Webpack 的基础知识和打包配置

什么是 React SSR

React SSR，即 React 服务器端渲染。它是将 React 组件在服务端渲染出 HTML 页面，然后将其发送给客户端，避免了客户端浏览器加载 JS 文件后再进行渲染的等待时间，提升了页面的初次渲染速度，同时也有利于 SEO 优化。

React SSR 的核心思路是：将 React 组件尽可能地还原成 HTML，然后将静态 HTML 传输给浏览器。而动态的部分则在浏览器端进行渲染和处理。

如何进行 React SSR

下面将通过一步步的教程，带大家进行 React SSR 的开发。

1. 配置 Node.js 环境

首先需要安装 Node.js，并保证环境正常运行。可以通过运行以下命令进行测试：

node -v

如果没有相应的版本信息，则需要先下载并安装 Node.js。

2. 配置 Express

Express 是 Node.js 的一个 Web 框架，提供了非常方便的路由和中间件功能。在这里，我们将使用 Express 搭建服务端框架。

首先需要安装 Express，可以通过以下命令进行安装：

npm install express --save

安装完成后，可以在项目根目录下编写 app.js 文件，并进行如下配置：

// www.javascriptcn.com code example
const express = require('express');
const app = express();

// 静态资源目录
app.use(express.static('public'));

// 配置路由
app.get('/', function (req, res) {
  res.send('Hello World');
});

// 启动服务
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

3. 前端 React 组件

在完成了服务端环境的搭建后，需要编写前端的 React 组件。在这里，我们将采用一个简单的例子：

// www.javascriptcn.com code example
import React from 'react';
import ReactDOM from 'react-dom';

class App extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      count: 0
    };
  }

  handleClick = () => {
    this.setState({
      count: this.state.count + 1
    });
  }

  render() {
    return (
      <div>
        <h1>React SSR Example</h1>
        <p>Count: {this.state.count}</p>
        <button onClick={this.handleClick}>Click Me</button>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.getElementById('root'));

4. 配置 Webpack

接下来需要使用 Webpack 进行打包，将 React 组件转换为静态 HTML 文件。在这里我们需要额外安装 webpack-node-externals，它可以帮助我们把 Node.js 依赖的模块排除在 Webpack 打包之外。

npm install webpack webpack-cli webpack-node-externals --save-dev

然后可以编写一个 Webpack 配置文件 webpack.config.js：

// www.javascriptcn.com code example
const path = require('path');
const nodeExternals = require('webpack-node-externals');

module.exports = {
  entry: './src/index.js',
  target: 'node',
  externals: [nodeExternals()],
  output: {
    filename: 'index.js',
    path: path.resolve(__dirname, 'dist'),
    libraryTarget: 'commonjs2',
  },
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        include: path.resolve(__dirname, 'src'),
        use: {
          loader: 'babel-loader',
        },
      },
    ],
  },
  resolve: {
    extensions: ['.js', '.jsx'],
  },
};

Webpack 配置完成后，可以运行以下命令进行打包：

npx webpack --config webpack.config.js

5. 服务端渲染

在完成了前端 React 组件和 Webpack 配置之后，最后需要编写服务端渲染代码，将生成的 HTML 文件发送至浏览器。

在这里，我们可以首先编写一个简单的服务端渲染函数 render.js，它使用了 ReactDOMServer.renderToString() 方法将 React 组件转换为字符串形式的 HTML，然后将其插入到一个 HTML 模板中：

// www.javascriptcn.com code example
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import App from './components/App';

export default function render() {
  const content = ReactDOMServer.renderToString(<App />);

  return `
    <html>
      <head>
        <title>React SSR Example</title>
      </head>
      <body>
        <div id="root">${content}</div>
        <script src="./index.js"></script>
      </body>
    </html>
  `;
}

这里使用了一个简单的 HTML 模板，其中的 div 元素和后面的 script 元素会在浏览器端进行处理。

然后在 app.js 中使用该函数并添加路由：

// www.javascriptcn.com code example
const express = require('express');
const app = express();
const render = require('./render').default;

// 静态资源目录
app.use(express.static('public'));

// 配置路由
app.get('/', function (req, res) {
  const html = render();
  res.send(html);
});

// 启动服务
app.listen(3000, function () {
  console.log('Example app listening on port 3000!');
});

最后，我们需要使用命令行启动服务：

node dist/index.js

然后在浏览器中打开 http://localhost:3000，就可以看到 React SSR 的效果了。

结语

本文为大家介绍了 React SSR 的基本思路和实现方式，并带大家实现了一个简单的 React SSR 例子。其中也提到了一些前置知识和相关技术，希望能够帮助大家更深入地了解和使用 React SSR。

来源：JavaScript中文网，转载请注明来源 https://www.javascriptcn.com/post/67d6a101a941bf7134c68db2

手把手带你学会 React SSR