简介
React 是一种流行的前端 JavaScript 库，用于构建 Web 应用程序。React Render Server 是一个 Node.js 服务器端渲染器，它可以在服务器端呈现 React 组件并将其作为 HTML 返回。这样做的好处是可以提高 SEO 和性能。
在此篇文章中，我们将介绍 npm 包 react-render-server 的使用教程。我们会从安装和基本使用开始，逐步深入，最终讲解一些高级用法和最佳实践。
安装
要使用 react-render-server，您需要先安装 Node.js 和 npm。如果您尚未安装它们，请访问 Node.js 官网 下载安装包并安装。
一旦您安装了 Node.js 和 npm，您可以使用以下命令安装 react-render-server：
npm install react-render-server
基本使用
以下是一个基本的使用示例：
-- -------------------- ---- ------- ----- - ------ - - ------------------------------- ----- --- - ----------------- ----- -------- ------------------ ---- - ----- ---- - ----- ----------- ---- --------------- - ----- ------ - -------------------------------------------- --------------------
此示例创建一个服务器，监听端口 3000。当请求到达时，服务器将渲染 <app> 组件并将结果返回给客户端。请注意，我们使用了 async/await ，以便在组件准备好之前等待。
配置
您可以配置渲染器以满足您的要求。以下是一些常见的配置选项：
basePath
basePath 配置选项可用于设置应用程序的根目录。这对于处理嵌套路由或其他动态路由的应用程序非常有用。
const { render } = require('react-render-server');
async function handleRequest(req, res) {
const html = await render(<App />, { basePath: '/blog' });
res.send(html);
}在上面的例子中，应用程序被设置为 /blog 目录。
timeout
如果您的组件需要大量计算，那么您可能需要设置一个超时时间。在这种情况下，组件的渲染将被中断，并且服务器将返回一个 500 错误响应。
const { render } = require('react-render-server');
async function handleRequest(req, res) {
const html = await render(<App />, { timeout: 5000 });
res.send(html);
}在上面的例子中，服务器连接将在 5 秒钟后断开。
高级用法
以下是 react-render-server 的高级用法：
缓存
考虑到重新呈现组件所需的时间，服务器端渲染通常需要缓存。缓存可以显着提高性能，并且是使用 react-render-server 时的一项关键优化。
react-render-server 支持内置缓存。默认情况下，缓存将在内存中保存，并在渲染相同组件时返回缓存的 HTML。下面是如何使用缓存：
const { createRenderer } = require('react-render-server');
const renderer = createRenderer({ cache: true });
async function handleRequest(req, res) {
const html = await renderer.render(<App />);
res.send(html);
}在上面的例子中，我们使用 createRenderer 方法创建了一个新的渲染器，并启用了内置缓存。在这个例子中，如果您再次渲染相同的组件，渲染器将返回缓存的 HTML。
React Router
在一个基于 React Router 的应用程序中使用 react-render-server 需要一些额外的步骤。
首先，您需要将服务器配置为使用 React Router：
-- -------------------- ---- -------
----- - ------------------- - - -------------------
----- - ------ - - ------------------------
----- - -------------- - - ----------------------------
----- - ------------ ------------ - - -------------------------------
----- ------- - -------------------
----- ------ - -------------------- -- --- ------------------- -----
----- --- - ----------
----- ------- - ----------------------
----------------------------------
------------ ----- ----- ---- -- -
----- ------- - ------------------- ----------
----- -------- - -------------- ------ ----- -- -- -
-- ---------------- -
------ ----------------------
- ---- -
------ ----------------------
-
---
----- ---- - ----- ----------------------
----- ---- - ---------------
------- ------------------
----------------------
---------
--
---------------
---
-----------------在上面的例子中，我们使用 matchRoutes 方法查找与请求匹配的路由，然后使用 renderRoutes 和 renderToString 方法将这些路由呈现为字符串。我们还通过 createMemoryHistory 创建了一个内存路由器，这样我们就可以使用 React Router。
其次，您需要在组件中定义 loadData 方法，以便服务器可以提前获取数据。例如：
function MyComponent({ data }) {
// 渲染组件
}
MyComponent.loadData = async (params) => {
const data = await fetch(`/api/${params.id}`);
return { data };
};在上面的例子中，我们定义了一个名为 loadData 的静态方法，并使用 fetch 方法从服务器获取数据。这将在服务器渲染之前自动调用。
自定义渲染器
最后，您还可以创建自定义渲染器。这使您能够更深入地控制渲染过程。以下是一个自定义渲染器的完整示例：
-- -------------------- ---- -------
----- - -------------- - - ----------------------------
----- -------------- -
----------------- -------- -
------ --- ----------------- ------- -- -
----- ---- - --------------------------
--------------
---
-
-
----- -------- - --- -----------------
----- -------- ------------------ ---- -
----- ---- - ----- -------------------- ----
---------------
-在上面的例子中，我们使用 renderToString 直接呈现组件，而没有使用 react-render-server 的默认渲染器。这将使用 React 更深入地控制渲染过程。自定义渲染器需要实现 render 方法，并使用 Promise 返回 HTML。
结论
在这篇文章中，我们介绍了如何使用 react-render-server 将 React 组件渲染为 HTML。我们介绍了其基本用法、配置和高级用法。现在您应该能够开始在服务器上呈现 React 应用程序了！
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6005568a81e8991b448d352c