在现代 Web 开发中，React 已经成为了前端开发的核心技术之一。React 是一种用于构建用户界面的 JavaScript 库，它可以帮助我们构建复杂的交互式应用程序。然而，React 通常运行在浏览器中，这意味着它需要向服务器发送请求，以获取数据和渲染应用程序。这可能会导致性能问题，因为客户端的计算机需要承担大部分工作。
为了解决这个问题，我们可以使用服务端渲染（SSR）来将 React 应用程序渲染到服务器上，然后将 HTML 和 JavaScript 一起发送到客户端。这可以提高性能，减少页面加载时间，同时提高搜索引擎优化（SEO）的效果。
在本文中，我们将介绍如何在 Express.js 中使用服务端渲染 React。我们将讨论以下主题：
- 为什么要使用服务端渲染 React？
- 如何在 Express.js 中设置 React 的服务端渲染？
- 如何在 React 中使用服务端渲染？
为什么要使用服务端渲染 React？
使用服务端渲染 React 有很多好处。以下是其中一些：
- 提高性能：服务端渲染可以减少页面加载时间，因为 HTML 和 JavaScript 一起发送到客户端，而不是分别发送。
- 提高搜索引擎优化（SEO）：搜索引擎可以更好地理解服务端渲染的页面，因为它们可以直接看到 HTML。这可以提高您的网站在搜索引擎中的排名。
- 更好的用户体验：由于页面加载速度更快，用户可以更快地看到内容，并且不需要等待 JavaScript 加载和运行。
如何在 Express.js 中设置 React 的服务端渲染？
要在 Express.js 中设置 React 的服务端渲染，您需要完成以下步骤：
- 安装所需的软件包
在 Express.js 中使用服务端渲染 React，需要安装以下软件包：
- express：用于构建 Web 应用程序的框架。
- react：用于构建用户界面的 JavaScript 库。
- react-dom：用于在 Web 上呈现 React 组件。
- react-router-dom：用于在 Web 上实现路由。
您可以使用以下命令安装这些软件包：
npm install express react react-dom react-router-dom --save
- 创建 Express.js 应用程序
在创建 Express.js 应用程序之前，您需要先创建一个 React 应用程序。如果您已经有了 React 应用程序，则可以跳过此步骤。
要创建一个新的 React 应用程序，请使用以下命令：
npx create-react-app my-app
此命令将创建一个名为 my-app 的新 React 应用程序。
接下来，您需要创建一个 Express.js 应用程序。要创建 Express.js 应用程序，请使用以下命令：
mkdir my-express-app cd my-express-app npm init -y
此命令将创建一个名为 my-express-app 的新文件夹，并在其中创建一个新的 npm 项目。
- 配置 Express.js 应用程序
在您的 Express.js 应用程序中，您需要配置以下内容：
- 设置静态资源目录
- 设置路由
- 设置服务器端渲染
首先，您需要设置静态资源目录。要设置静态资源目录，请使用以下代码：
const express = require('express'); const path = require('path'); const app = express(); app.use(express.static(path.join(__dirname, 'public')));
此代码将设置 public 文件夹中的所有文件为静态资源，并使它们可供访问。
接下来，您需要设置路由。要设置路由，请使用以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- --- - ---------- ------------------------------------------- ------------ ------------ ----- ---- -- - --------------------------------- --------- --------------- ---展开代码
此代码将在所有路由上发送 index.html 文件，并在其中包含 React 应用程序的 JavaScript。
最后，您需要设置服务器端渲染。要设置服务器端渲染，请使用以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- ----- - ----------------- ----- -------------- - ---------------------------- ----- - ------------ - - ---------------------------- ----- --- - --------------------- ----- --- - ---------- ------------------------------------------- ------------ ------------ ----- ---- -- - ----- ------- - --- ----- ---- - ------------------------------ ------------- ------------------ ------------------ ---- -- --------------- -- ---------- --------- ----- ------ ------ --------- ----------- ------- ------ ---- ----------------------- ------- -------------------------- ------- ------- --- ---展开代码
此代码将使用 ReactDOMServer 将 React 应用程序渲染为字符串，并将其插入到 HTML 中。它还将包含一个 bundle.js 文件，其中包含 React 应用程序的 JavaScript。
- 运行 Express.js 应用程序
要运行 Express.js 应用程序，请使用以下命令：
node index.js
此命令将启动 Express.js 应用程序，并使其可供访问。
如何在 React 中使用服务端渲染？
要在 React 中使用服务端渲染，您需要完成以下步骤：
- 创建一个服务器端入口文件
在 React 应用程序中，您需要创建一个服务器端入口文件，以便在服务器端渲染 React 组件。要创建服务器端入口文件，请使用以下代码：
-- -------------------- ---- ------- ----- ----- - ----------------- ----- -------------- - ---------------------------- ----- - ------------ - - ---------------------------- ----- --- - ----------------- -------- ----------- ---- - ----- ------- - --- ----- ---- - ------------------------------ ------------- ------------------ ------------------ ---- -- --------------- -- ---------- --------- ----- ------ ------ --------- ----------- ------- ------ ---- ----------------------- ------- -------------------------- ------- ------- --- - -------------- - -------展开代码
此代码将使用 ReactDOMServer 将 React 应用程序渲染为字符串，并将其插入到 HTML 中。它还将包含一个 bundle.js 文件，其中包含 React 应用程序的 JavaScript。
- 在服务器端中使用 React
在服务器端中使用 React，您需要使用以下代码：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- ---- - ---------------- ----- ------ - -------------------- ----- --- - ---------- ------------------------------------------- ------------ ------------ -------- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---展开代码
此代码将使用 render 函数来渲染 React 应用程序，并在所有路由上使用它。
示例代码
以下是完整的示例代码：
-- -------------------- ---- ------- -- --------- ----- ----- - ----------------- ----- -------------- - ---------------------------- ----- - ------------ - - ---------------------------- ----- --- - --------------------- -------- ----------- ---- - ----- ------- - --- ----- ---- - ------------------------------ ------------- ------------------ ------------------ ---- -- --------------- -- ---------- --------- ----- ------ ------ --------- ----------- ------- ------ ---- ----------------------- ------- -------------------------- ------- ------- --- - -------------- - -------展开代码
-- -------------------- ---- ------- -- -------- ----- ------- - ------------------- ----- ---- - ---------------- ----- ------ - -------------------- ----- --- - ---------- ------------------------------------------- ------------ ------------ -------- ---------------- -- -- - ------------------- -- ------- -- ---- ------- ---展开代码
-- -------------------- ---- ------- -- ------ ------ ----- ---- -------- ------ - ------------- -- ------- ------ ------- ---- - ---- ------------------- -------- ------ - ------ - ----- ------------- ----- ------------------------ ------ -- - -------- ------- - ------ - ----- -------------- ----- ------------------ ------ -- - -------- ----- - ------ - -------- -------- ------ ----- -------- ---------------- -- ------ ------------- ----------------- -- --------- --------- -- - ------ ------- ----展开代码
结论
在本文中，我们讨论了如何在 Express.js 中使用服务端渲染 React。我们了解了为什么要使用服务端渲染 React，以及如何在 Express.js 中设置 React 的服务端渲染。我们还讨论了如何在 React 中使用服务端渲染，并提供了示例代码。通过使用服务端渲染 React，您可以提高性能，提高搜索引擎优化（SEO）的效果，并提供更好的用户体验。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/676bcd5678388e33bb27df65
