在前端开发过程中，服务端渲染（Server-Side Rendering，SSR）是一项非常重要的技术。使用 SSR 可以极大地提高网站的初始加载速度和 SEO 效果。本文将介绍如何使用 Hapi 和 React SSR 实现一个完整的网站，同时也会谈到一些陷阱和解决方法。
Hapi
Hapi 是一个 Node.js Web 框架，它专注于构建可扩展的 API。Hapi 内置了许多功能，例如路由、中间件、验证等。它的主要特点是可扩展性和可配置性。使用 Hapi 可以轻松地创建一个完整的 Web 应用程序，并且可以根据自己的需求进行更改和扩展。以下是如何使用 Hapi 创建一个简单的服务器：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - --- ------------- ----- ---- ---
-- ---------
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ------- --------
-
---
-- -----
---------------------- -- -
------------------- ------- --- ---------------------
---上述代码创建了一个 Hapi 服务器，监听端口号为 3000。当用户访问根路径时，会返回字符串 “Hello, world!”。
React SSR
服务端渲染允许在服务器端生成 HTML，这样可以节省客户端的渲染时间，并且可以提高 SEO 效果。React SSR 是指将 React 应用程序呈现为 HTML，并将其发送到客户端以供展示。以下是一个简单的 React 组件：
import React from 'react';
function HelloWorld(props) {
return <div>Hello, {props.name}!</div>;
}
export default HelloWorld;在客户端，将此组件呈现为 HTML 的常见方式是使用 ReactDOM.render 函数：
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './HelloWorld';
ReactDOM.render(<HelloWorld name="world" />, document.getElementById('root'));在上述代码中，ReactDOM.render 将 HelloWorld 组件呈现为 HTML，并将其插入到 ID 为 “root” 的 DOM 元素中。
在服务端，将 React 组件呈现为 HTML 的方式与客户端不同。以下是使用 ReactDOMServer.renderToString 函数将 HelloWorld 组件呈现为 HTML 的示例代码：
import React from 'react'; import ReactDOMServer from 'react-dom/server'; import HelloWorld from './HelloWorld'; const html = ReactDOMServer.renderToString(<HelloWorld name="world" />); console.log(html);
上述代码使用 ReactDOMServer.renderToString 函数将 HelloWorld 组件呈现为 HTML 格式，并将其输出到控制台。
使用 React SSR 最常见的模式是将项目分为客户端和服务器端两部分，并分别构建，然后在请求到达服务器时将 HTML 字符串发送回客户端。使用 React Router 等路由库可以实现多页应用和单页应用的服务端渲染。
Hapi 和 React SSR
以下是如何使用 Hapi 和 React SSR 创建一个多页应用的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -----------------
----- -------------- - ----------------------------
----- - ------------ - - ----------------------------
----- --- - -------------------------
----- ------ - --- ------------- ----- ---- ---
--------------
------- ------
----- ----
-------- --------- -- -- -
----- ------- - ---
----- ---- - ------------------------------
------------- ------------------------------- ------------------
---- --
---------------
--
-- ------------- -
------ ------------------------
-
------ ------------
--------- -----
------
------
----------------- -----------
-------
------
---- -----------------------
-------
-------
---------------------
-
---
---------------------- -- -
------------------- ------- --- ---------------------
---在上述代码中，首先创建了一个 Hapi 服务器。然后，定义了一个路由处理程序，当请求到达服务器时，将 App 组件呈现为 HTML 并返回给客户端。在服务器端，使用 StaticRouter 将请求的 URL 传递给 App 组件，以便正确渲染路由。如果 StaticRouter 的 context 对象中包含一个 URL，需要使用 Hapi 的重定向方法将请求重定向到正确的页面。
在以上代码中，传递给 react-dom/server 的 renderToString 函数返回一个表示 HTML 标记的字符串，将其嵌入到正确的 HTML 模板中，使用 Hapi 的 response 方法将其返回给客户端。
指南和陷阱
静态资源路径处理
在使用 React SSR 时，需要将静态资源（例如 JavaScript 和 CSS 文件）的路径正确地指定为服务器端的路径。在 Hapi 中，可以使用 Inert 插件来呈现静态资源。以下是如何在 Hapi 中使用 Inert 插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -----------------
----- ------ - --- ------------- ----- ---- ---
------------------------------ -- -
--------------
------- ------
----- -------------------
-------- -
---------- -
----- -----------
------ ------
---------------- -----
-
-
---
---------------------- -- -
------------------- ------- --- ---------------------
---
---在上述代码中，使用了 Inert 插件来处理静态文件。通过在路由中添加 /static/{param*} 来处理静态文件，例如 /static/app.js。在本示例中，静态资源的路径是 ./static，需要在路由处理程序中指定该路径。
发送异步数据
在 React SSR 中，为了避免阻止渲染，数据需要在组件呈现之前获取。在服务器端，数据通常使用异步请求获取。以下是一个从服务器端获取数据并将其传递给 React 组件的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ----- - -----------------
----- -------------- - ----------------------------
----- ------ - --- ------------- ----- ---- ---
--------------
------- ------
----- ----
-------- ----- --------- -- -- -
----- ---- - ----- ------------ -- ------
----- ---- - ---------------------------------- ----------- ---- -- --------
------ ------------
--------- -----
------
------
----------------- -----------
-------
------
---- -----------------------
--------
------------------------------------------------- -- ---------
---------
------- ------------------------------ -- ---- ---------- --
-------
-------
---------------------
-
---
---------------------- -- -
------------------- ------- --- ---------------------
---在上述代码中，使用了 async/await 关键字来异步获取数据。然后，将数据传递给 App 组件，并在渲染时传递给组件。在完整的 HTML 页面中，使用 window.INITIAL_STATE 将数据传递给客户端。在客户端 JavaScript 中，可以访问此对象并使用数据。
处理 React Router
在 React SSR 中，通常需要使用 React Router 等路由库来处理页面路由。以下是使用 React Router 处理路由的示例代码：
-- -------------------- ---- -------
----- ------- - -------------------
----- ----- - -----------------
----- -------------- - ----------------------------
----- - ------------ - - ----------------------------
----- --- - -------------------------
----- ------ - ----------
-------------------------------------
--------------- ----- ---- -- -
----- ------- - ---
----- ---- - ------------------------------
------------- ------------------ ------------------
---- --
---------------
--
-- ------------- -
--------------------------
- ---- -
----------
--------- -----
------
------
------------ -----------
-------
------
---- -----------------------
------- -----------------------
-------
-------
---
-
---
------------------- -- -- -
------------------- ------- -- ------------------------
---在上述代码中，使用了 React Router 处理页面路由。StaticRouter 总是将请求的 URL 传递给 App 组件，以便正确呈现页面。如果 StaticRouter 的 context 对象中包含一个 URL，需要使用 Express 的重定向方法将请求重定向到正确的页面。
结论
在本文中，我们使用 Hapi 和 React SSR 实现了一个多页应用，并介绍了一些常见的陷阱和解决方法。通过使用 Hapi 和 React SSR，可以构建快速的、可扩展的 Web 应用程序，并在 SEO 上获得更好的效果。希望此文章可以帮助您成为更好的前端开发者。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/66f24a77a44b36ee576550cb