在现代的 Web 开发中，前端框架和模板库的流行使得开发者们能够更容易地实现动态的用户界面，React 和 Redux 就是其中非常流行的一组组合。不过，随着应用越来越大，单纯依靠客户端进行数据获取就会导致数据获取变得越来越慢。此时，借助服务端进行数据获取就是一种不错的选择。本文将介绍如何使用 Hapi.js 实现 React + Redux 客户端和服务端的数据获取。
Hapi.js 的介绍以及使用场景
Hapi.js 是一个专注于构建 Node.js 服务的框架，它简单易用且功能强大。Hapi.js 有许多优秀的特性，包括：
- 路由管理器：可以轻松地管理路由，并在路由中定义参数和占位符
- 处理器：可以根据请求的方式或内容格式指定路由的处理器
- 插件架构：它具有值得信赖的插件生态系统，以帮助开发者更快地应对不同的需求
- 扩展性：它是高度可扩展的，可以自定义它的全部组件以满足您的需要。
使用 Hapi.js 可以轻松地实现服务端渲染 SSR，让前端页面的性能得以提升并且生成的页面能更快地被搜索引擎收录。它的流程简单易懂，例如当用户请求页：http://localhost:3000/about 时，服务器先生成一个 HTML 的模板，再在模板中添加数据，最后将模板直接返回给用户。这样的 Web 应用会使得 SEO（搜索引擎优化）更加容易实现。
在前后端分离的大背景下，SSR（Server Slide Render)越来越受到前端工程师的追捧。SSR 可以提高页面的渲染速度，增加搜索引擎对页面内容的抓取效率。而在 React 中，则又是使用 React-Router 及 Redux 时数据获取流程的问题。这里在介绍下 Hapi.js 的路由管理器将如何处理数据获取。
以下是 Hapi.js 的简单路由：
server.route({
method: 'GET',
path: '/about',
handler: (_req, h) => {
const pageContent = '<h1>About Page</h1>'
return h.response(pageContent)
}
})和 React 的简单路由：
<Route exact path="/about" component={AboutPage} />首先，我们需要创建应用程序，并导入非常基本的 Hapi.js 插件：
-- -------------------- ---- -------
----- ----- - ----------------
----- ------ - -----------------
----- ---- - ---------------
----- ---- - ---------------
----- ------ - -------------
----- -----
----- ------------
------- -
------ -
----------- -------------------- ---------
-
-
--
----- ---------- - ----- -- -- -
----- ----------------------
----- -----------------------
--------------
-------- -
---- ---------------------------
--
----------- ----------
----- --------
--------------- -
----------- -------------------- ---------
------- ---------
--
--------- -------------------- --- -------------
--
--------------
-- ----
-
------- ------
----- ----
-------- ---------- -- -- -
----- ----- - ----
----- --------- - ----
----- --------- - ------------
------ ------------- -
------ -------
----------
------
---------
--
-
--
-- -----
-
------- ------
----- ---------
-------- ----- ----- -- -- -
----- ----- - ----
----- --------- - ----
----- --------- - ------------
------ ------------- -
------ --------
----------
------
---------
--
-
--
--
-
------------然后，我们需要在服务器端进行数据获取并将数据传递给客户端，客户端通过 React-Redux 来进行数据的消费。这段代码的关键点是通过 getStore 函数获取 store 并将 store 的状态保存在 HTML 中，客户端的代码将在 HTML 中包含获取的状态，并将其加载到程序中：
backend/routes.js:
-- -------------------- ---- -------
------ ---- ---- ---------------------------
------ ----- ---- ----------------------------
------ - ----------- - ---- -------
------ - -------- - ---- -------------
------ - ------------ - ---- ------------------
------ ----------- ---- --------------------
------ - -------------- - ---- ------------------
--------------
------- ------
----- ----
-------- --------- -- -- -
----- ------- - --
----- ----- - ------------------------
----- --- - -
------------- ---------------------- ------------------
--------- --------------
----- --
-----------
---------------
-
----- --------- - -------------------
----- ----- - --------------------------------
----- --------- - ------------
------ ------------- -
------ ----- ------
----------
------
---------
--
-
--
--------------
------- ------
----- ---------
-------- --------- -- -- -
----- ------- - --
----- ----- - ------------------------
----- --- - -
------------- ---------------------- ------------------
--------- --------------
------ --
-----------
---------------
-
----- --------- - -------------------
----- ----- - --------------------------------
----- --------- - ------------
------ ------------- -
------ ------ ------
----------
------
---------
--
-
--现在我们已经在服务端取得了 Redux 数据并将它塞到了 HTML 中。不过，我们还不能在客户端上正常读取这些数据。为此，我们需要通过 Redux 将 HTML 中获取的数据映射到合适的组件中。
frontend/client.js:
-- -------------------- ---- -------
------ ----- ---- -------
------ - ------- - ---- -----------
------ - ----------- - ---- -------
------ - -------- - ---- -------------
------ - ------------- - ---- ------------------
------ ---- ---- ---------------------------
------ ----- ---- ----------------------------
------ ----------- ---- --------------------
----- ----- - ------------------------ ------------------------
----- ---------------- - -- -- -
---------------
--------- --------------
-----
------ ----- -------- ---------------- --
------ ------------- ----------------- --
------
-----------
----------------
-
------------------------- --- --------------------------------这段代码的关键在于 store 的初始化。它会从 window.__INITIAL_DATA__ 对象中读取初始的状态并根据它创建对应的状态树。window.__INITIAL_DATA__ 对象是我们在服务端从 store 中使用 JSON.stringify 导出的值，此时它们被记录在了 HTML 中。页面的任何后续请求都会将初始状态放在这个 cookie 中，使得客户端可以得到他需要的数据。
总结
以上就是如何借助 Hapi.js 实现 React + Redux 客户端和服务端的数据获取的介绍。上述示例代码演示了在 Hapi.js 中创建简单的路由和如何在路由上处理 Redux 中的数据。希望这篇文章对于你的学习和实践有所帮助。要注意的是在复杂的应用场景中，服务端的性能很容易变得非常重要。因此，在实现组件逻辑时我们还需要考虑其对于服务器性能的负面影响。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647fe64748841e9894f6783d