在前端开发中，我们经常会使用 React 或 Vue 这样的框架来构建应用，但是这些框架仅仅是构建了一个 SPA（Single Page Application），这意味着整个应用只有一个页面，由 JavaScript 动态渲染内容。但是，尽管 SPA 在用户体验方面有很多优势，但是也存在一些问题。例如，SPA 应用的首次加载时间较长，因为需要下载大量的 JavaScript 代码；搜索引擎也很难对 SPA 应用进行索引。这是因为搜索引擎爬虫无法解析 JavaScript 代码，无法获取应用的实际内容。
为了解决这些问题，我们需要实现 SSR（Server Side Rendering）。将应用的渲染过程从客户端移动到服务器端，将服务端生成的 HTML 返回给客户端，而不是简单地返回 JavaScript。这样可以减少首次加载时间，为搜索引擎提供更多的内容抓取机会。
Hapi 是一个 Node.js 框架，它提供了一些强大的功能来实现 SSR。在本文中，我们将重点关注 Hapi 应用的 SSR 实现方式，包括如何使用 Hapi 来启用 SSR、如何组织项目和代码以及如何使用相关技术来优化和扩展 Hapi SSR 应用程序。
Hapi SSR 实现方式
实现 Hapi SSR 有两种方式：使用 Hapi 的视图引擎和使用 React。在本文中，我们将介绍这两种方式，并提供一些示例代码来让你更好地理解这两种实现方式。
使用 Hapi 的视图引擎
Hapi 的视图引擎是一种简单的实现方式，它使用模板引擎来将 HTML 渲染为响应。这种方式使用模板引擎生成 HTML，然后将生成的 HTML 作为响应返回给客户端。
下面是使用 Hapi 视图引擎实现 SSR 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ------ - ------------------------
----- ---------- - ----------------------
----- ------ - --- -------------
----- ------------
----- ----
---
----- ------------------------
--------------
-------- -
----- ----------
--
----------- ----------
----- -------
---
--------------
------- ------
----- ----
-------- --------- -- -- -
------ ----------------
-
---
----- ---------------在这个例子中，我们首先通过 server.views 方法启用了 Hapi 的视图引擎功能。我们通过传递 engines 属性来指定使用哪种模板引擎，这里我们使用了 Handlebars。
然后，我们将 path 属性设置为包含我们视图文件的目录。在这个例子中，我们使用了名为 index.html 的文件，这是一个简单的 HTML 文件，包含应用的主要结构。
最后，在我们的路由处理程序中，我们调用 h.view 方法来渲染 HTML 视图。这个方法可以将视图文件路径作为参数，然后返回一个包含视图文件渲染结果的响应。
使用 Hapi 的视图引擎实现 SSR 的优点是它相对简单，易于理解和维护。如果你只需要简单的 SSR 实现，这种方式可能适合你。缺点是它可能不如使用 React 灵活，因为它仅限于模板引擎的功能。
使用 React
React 是一种强大而灵活的前端库，它能够使用极少的代码来构建复杂的 UI。React 可以用于实现 SSR，这种方式让你可以使用 React 构建在服务器上运行的应用，从而得到更快的页面响应时间和更好的 SEO。
下面是使用 React 完成 Hapi SSR 的示例代码：
-- -------------------- ---- -------
----- ---- - ----------------------
----- ----- - -----------------------
----- ----- - -----------------
----- -------------- - ----------------------------
----- - ------------ - - ----------------------------
----- --- - ---------------------------------
----- ------ - --- -------------
----- ------------
----- ----
---
----- -----------------------
--------------
------- ------
----- ------------
-------- --------- -- -- -
----- ------- - ---
----- ---- - ------------------------------
------------- ---------------------- ------------------
---- --
---------------
--
-- ------------- -
------ ------------------------
-
------ --------------------- ---------------
-
---
----- ---------------在这个例子中，我们首先创建了一个 Hapi 服务器实例，并启用了 Inert 插件，以便可以提供静态文件。
然后，我们注册了一个路由处理程序来处理所有路由。在处理程序内部，我们使用了 React 的 ReactDOMServer.renderToString 方法来将 React 组件渲染到 HTML 中。
为了使 React 组件在服务器上意识到 URL 的变化，我们使用了 React Router 的 StaticRouter 组件，并将请求的 URL 作为 props 传入。如果客户端正在尝试访问无效的 URL，则 StaticRouter 组件会在 context 对象中设置 url 属性。这使我们可以返回 h.redirect 方法来让客户端重定向到正确的 URL。
最后，我们返回渲染的 HTML，将其包含在 h.response 对象中，以便 Hapi 可以将其作为响应发送给客户端。
使用 React 实现 SSR 的最大优点是它能够使用 JavaScript 的全部功能来实现视图渲染，这意味着你可以构建复杂的 UI 并使用你已经熟悉的工具。缺点是它相对复杂，需要更多的工作来设置和维护。
总结
在本文中，我们介绍了如何使用 Hapi 框架实现 SSR，包括使用 Hapi 视图引擎和使用 React 的两种方式。尽管 SSR 可能会在一些情况下增加应用程序的复杂性，但在许多其他情况下，SSR 可以为用户和搜索引擎爬虫提供更好的体验。在这里提供的示例代码应该能够帮助你启动 Hapi SSR 应用程序并在此基础上构建出你自己的应用程序。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/646f3bc4968c7c53b0da10d7