Express.js 与 React 服务端渲染实践-JavaScript中文网-JavaScript教程资源分享门户

概述

随着互联网技术发展，前端领域也逐渐变得越来越重要。而在前端技术中，React 作为一种高效、灵活、易于维护的组件化框架，正逐渐被广泛采用。

然而，在开发 React 项目时，由于 React 的特性，传统的客户端渲染方式会导致网站性能瓶颈，也会带来 SEO 不友好的问题。为了解决这些问题，服务端渲染（Server-Side Rendering）应运而生。本文将介绍如何使用 Express.js 和 React 进行服务端渲染实践，并附带代码示例进行详细讲解。

Express.js 简介

Express.js 是一个基于 Node.js 平台的开发框架，它提供了很多常用的 Web 应用程序开发功能和工具，让我们可以更加方便地开发 Web 应用程序。与其他 Web 应用程序开发框架不同，Express.js 通过中间件（Middleware）的概念来处理请求和响应。

React 服务端渲染简介

React 是一个用于构建用户界面的 JavaScript 库。它是一个基于组件的框架，可以让开发者更加高效地构建丰富的用户界面。服务端渲染是一种显示 Web 页面的技术，具体来说，就是在服务器端把页面渲染成 HTML，然后再把该 HTML 发送给客户端。这种方式可以提高网站的性能，提升用户体验的同时，也有利于搜索引擎评估和索引网站。

服务端渲染的优点

更快的加载速度：服务器端渲染可以提高网站的性能和加载速度，特别是在加载大量数据的情况下。
更好的 SEO 支持：由于搜索引擎会爬取网站的 HTML 内容，因此采用服务端渲染的方式，可以提高网站的 SEO 支持。
更佳的用户体验：采用服务端渲染的方式，可以提高网站的首屏渲染速度，从而带来更佳的用户体验。

Express.js 和 React 服务端渲染的实现

步骤一：初始化 Express.js 项目

首先，我们需要安装 Node.js 和 Express.js，然后在命令行中执行以下命令，初始化 Express.js 项目：

$ express myapp

其中，myapp 是自定义的项目名称。执行上述命令后，会生成一个基础的 Express.js 项目，我们需要进入项目目录，安装依赖并启动项目：

$ cd myapp && npm install
$ npm start

现在打开浏览器，访问 http://localhost:3000/ 可以看到 Express.js 的欢迎页面，表示项目已经启动成功。

步骤二：添加 React.js

接下来，我们需要在 Express.js 项目中添加 React.js。在命令行中执行以下命令，安装 React.js 和 ReactDOM：

$ npm install react react-dom --save

步骤三：创建 React 组件

我们以一个简单的“Hello World”组件为例：

// javascriptcn.com 代码示例
import React from 'react';

class HelloWorld extends React.Component {
  render() {
    return (
      <div>
        <h1>Hello, World!</h1>
      </div>
    )
  }
}

export default HelloWorld;

步骤四：服务端渲染 React 组件

在 Express.js 项目中，我们需要使用 React 和 ReactDOM 服务器端的渲染 API，将 React 组件渲染成 HTML。以下是 Express.js 服务器端渲染 React 组件的示例代码：

// javascriptcn.com 代码示例
import express from 'express';
import React from 'react';
import ReactDOMServer from 'react-dom/server';
import HelloWorld from './components/HelloWorld';

const app = express();

app.set('views', __dirname + '/views');
app.set('view engine', 'ejs');

app.get('/', (req, res) => {
  const content = ReactDOMServer.renderToString(<HelloWorld />);
  res.render('index', { content });
});

app.listen(3000);

上述代码中，我们通过使用 ReactDOMServer 的 renderToString() 方法，将 HelloWorld 组件渲染成 HTML 字符串。然后，我们使用 Express.js 的 res.render() 方法，将 HTML 字符串渲染到网页中。在 HTML 中，我们可以在 div 中输出 content 的值，这样就可以正确地渲染页面了。

步骤五：在客户端中绑定 React 组件

在上述示例中，我们成功的实现了 React 组件的服务端渲染，因此，在浏览器中打开页面时，我们可以看到正确的组件渲染结果。但是，我们发现，当我们在浏览器中修改数据时，组件不会更新。

这是因为在服务端渲染的情况下，React 组件的事件不能在客户端上继续触发，因此，我们需要对 React 组件进行客户端绑定。以下是绑定客户端 React 组件的示例代码：

import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';

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

上述代码中，我们使用 ReactDOM.render() 方法，将 HelloWorld 组件渲染到客户端的 root 元素上。这样，在客户端中修改数据时，组件就能够正确地更新了。

总结

通过本文的介绍，我们了解了服务端渲染的优点，并且学习了如何使用 Express.js 和 React 实现服务端渲染。当然，这仅仅是一个简单的示例，实际的服务端渲染还有很多复杂的场景和细节需要处理。希望本文对读者有所启发并提供帮助。

来源：JavaScript中文网，转载请注明来源本文地址：https://www.javascriptcn.com/post/653388d37d4982a6eb715d0d