前言
随着 Web 技术的发展，越来越多的 Web 应用开始使用前后端分离的架构。然而，对于搜索引擎爬虫和浏览器无法执行 JavaScript 的情况下，单纯的前端应用存在 SEO 和首屏加载速度等问题。为了解决这些问题，我们可以使用服务器端渲染（Server-side Rendering，SSR）来将 Web 应用的初始状态直接渲染到 HTML 上，从而解决这些问题。
在本文中，我们将介绍如何使用 Hapi 和 React 构建支持服务器端渲染的 Web 应用。
环境准备
首先需要安装 Node.js 和 npm。可以从官网 https://nodejs.org/ 下载对应版本的安装包进行安装。
安装完成后，使用以下命令安装所需的依赖：
npm install --save hapi react react-dom react-router-dom
项目结构
以下是我们的项目结构：
-- -------------------- ---- ------- --- ------ - --- ---------- - --- --------- --- --------- --- --- - --- ---------- - - --- ------- - - --- -------- - --- ------ - --- --------- - --- -------- --- -----------------
public：用于存放 webpack 打包后的文件（HTML 和 JS）server.js：服务器端渲染的主要代码src：React 代码放置于此webpack.config.js：webpack 配置文件
webpack 配置
我们需要配置 webpack 将 React 代码打包成 bundle.js，并将其注入到 HTML 中。
以下是我们的 webpack 配置：
-- -------------------- ---- -------
----- ---- - ----------------
-------------- - -
------ -----------------
------- -
----- -------------------- ----------
--------- ------------
--
------- -
------ -
-
----- --------
-------- ---------------
---- -
------- ---------------
-------- -
-------- ------------------------
--
--
--
--
--
--React 代码
我们的应用中有两个页面：首页和关于页面。我们将使用 React Router 管理路由，并将 React 组件渲染到 HTML 上。
以下是我们的 React 代码：
src/components/Home.js
-- -------------------- ---- -------
------ ----- ---- --------
----- ---- - -- -- -
-----
-------- ---------
---------- -- --- ---- ---------
------
--
------ ------- -----src/components/About.js
-- -------------------- ---- -------
------ ----- ---- --------
----- ----- - -- -- -
-----
--------- ---------
------- -- --- ----- ---------
------
--
------ ------- ------src/App.js
-- -------------------- ---- -------
------ ----- ---- --------
------ - ------- ------ ---- - ---- -------------------
------ ---- ---- --------------------
------ ----- ---- ---------------------
----- --- - -- -- -
-----
-----
----
----
----- ------------------
-----
----
----- ------------------------
-----
-----
------
--------
------ ----- -------- ---------------- --
------ ------------- ----------------- --
---------
------
--
------ ------- ----src/index.js
-- -------------------- ---- -------
------ ----- ---- --------
------ -------- ---- ------------
------ - ------------- - ---- -------------------
------ --- ---- --------
-----------------
---------------
---- --
-----------------
--------------------------------
--服务器端渲染
我们需要将 React 组件渲染成 HTML 字符串，并将其注入到我们的 HTML 模板中。此外，我们还要使用 Hapi 框架搭建 HTTP 服务器，将渲染好的 HTML 响应给客户端。
以下是我们的服务器端渲染代码：
server.js
-- -------------------- ---- -------
----- ---- - ----------------------
----- ---- - ----------------
----- -- - --------------
----- ----- - -----------------
----- -------------- - ----------------------------
----- - ------------ - - ----------------------------
----- --- - -----------------------------
----- ------ - -------------
----- -----
----- ------------
---
-- ----- ------ -----
--------------
------- ------
----- -----------
-------- -
---------- -
----- ---------
---------------- -----
--
--
---
-- ------ --- -- ------
--------------
------- ------
----- ----
-------- --------- -- -- -
----- ------- - ---
----- --- - ------------------------------
------------- ---------------------- ------------------
---- --
----------------
--
----- ---- - --
------------------------------------- --------------------- -------
-------------- ------------------ ----- -------------------------
------ -
---------------
------------------
------------------------------- --------
--
---
-- ----- --- ------
----- -------- ------- -
----- ---------------
------------------- ------- -- ---------------------
-
-------------------------------- ----- -- -
-------------------
----------------
---
--------我们首先使用 Hapi 框架创建一个 HTTP 服务器，然后使用 server.route 方法定义两个路由：
- GET /{path*}：这个路由用于静态文件服务，将 public 目录下的所有文件都映射到服务器根路径；
- GET /：这个路由用于将 React 组件渲染成 HTML，并将其返回给客户端。
在 / 路由处理函数中，我们首先创建一个 React Router 的 StaticRouter，并将 req.url 传递给它。然后，我们使用 ReactDOMServer 的 renderToString 方法将 React 组件渲染成 HTML 字符串。最后，我们使用 fs 模块读取 public/index.html 文件，并替换其中的空 div#root 元素为 React 组件渲染的 HTML 字符串。
构建和启动
使用以下命令构建项目：
npm run build
这个命令将使用 webpack 将 React 代码打包成 bundle.js，然后将其放置到 public 目录下。
然后，使用以下命令启动服务器：
node server.js
访问 http://localhost:3000 可以看到应用已经可以支持服务器端渲染了！
总结
在本文中，我们介绍了如何使用 Hapi 和 React 构建服务器端渲染的 Web 应用。我们通过编写 React 组件，使用 React Router 管理路由，并使用 Hapi 框架搭建 HTTP 服务器，最终实现了支持服务器端渲染的 Web 应用。
希望本文对你有所帮助，让你更好地了解服务器端渲染和如何使用 Hapi 和 React 实现服务器端渲染。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64e1d2dcf6b2d6eab3d0f7f8