在前端开发中，服务器端渲染（Server-Side Rendering, SSR）被广泛应用于改善 SEO 和加速网站加载速度。Hapi 是一个 Node.js 开发框架，其提供了 vision 插件来支持服务器端渲染。本文将介绍如何使用 vision 实现服务器端渲染。
一、安装 Hapi 和 vision
在开始之前，需要先安装 Hapi 和 vision。可以使用 npm 安装：
--- ------- ---- ------ ------
二、配置视图引擎
vision 可以支持多种模板引擎，本文以 handlebars（也称为 hbs）为例。在 Hapi 服务器配置中，需要为视图引擎指定模板文件路径和扩展名：
----- ---- - ----------------
----- ------ - ------------------
----- ------ - --- --------------
----- ------- - -
-------- -
---- ---------------------
--
----------- ----------
----- --------
------- ----
--
----- ----- - ----- -- -- -
----- ------------------------
----------------------
----- ---------------
------------------- ------- --- ---------------------
--
--------在这里，我们使用 register 方法将 vision 插件注册到 Hapi 服务器中，然后使用 views 方法配置视图引擎选项。其中，relativeTo 表示模板文件相对于项目根目录的路径，path 则表示模板文件所在目录的名称，layout 表示是否使用全局布局文件（默认为 false）。
注：__dirname 是 Node.js 中的全局变量，表示当前模块的目录名。
三、渲染视图
在 Hapi 中，视图可以通过 server.views 配置项中定义的文件路径直接访问。在处理请求时，可以使用 handler 中的 view 方法渲染模板：
----- ---- - ----------------
----- ------ - ------------------
----- ------ - --- --------------
----- ------- - -
-------- -
---- ---------------------
--
----------- ----------
----- --------
------- ----
--
--------------
------- ------
----- ----
-------- --------- -- -- -
------ -------------- -
------ ----- ------
-------- -------- -- ------
---
-
---
----- ----- - ----- -- -- -
----- ------------------------
----------------------
----- ---------------
------------------- ------- --- ---------------------
--
--------在这里，我们定义了一个 GET 请求处理函数，使用 h.view 方法渲染了模板 home.hbs。模板中可以通过 {{title}} 和 {{message}} 占位符输出数据，这里的数据由 h.view 方法的第二个参数传递。
四、使用布局文件
在前面所示的代码中，没有使用布局文件。但是，通常情况下需要使用布局文件来为页面添加标题、页头、页脚等元素。在 handlebars 中，可以使用 {{> layout}} 指令来嵌入布局文件。
以下是简单的布局文件示例，命名为 layout.hbs：
--------- ----- ------ ------ ----- ---------------- ------------------------ ------- ------ ------------- ------- -------
使用布局文件只需在视图渲染时指定 layout 选项：
--------------
------- ------
----- ----
-------- --------- -- -- -
------ -------------- -
------ ----- ------
-------- -------- -- ------
-- -
------- --------
---
-
---这里的 layout 选项表示视图渲染时使用的布局文件名，不需要指定文件扩展名。
五、使用 partials
在 handlebars 中，partials 可以用于组织可重用的模板片段。定义 partials 很简单，只需将模板片段保存为单独的文件并以 .hbs 为扩展名，然后在视图中使用 {{> partial}} 指令来嵌入。
以下是一个名为 header.hbs 的 partials 示例：
--------
------------------
-----
----
------ ----------------------
------ ----------------------------
------ --------------------------------
-----
------
---------加载 partials 时需要指定 partials 所在的目录，可以在视图选项中添加 partialsPath 属性：
----- ------- - -
-------- -
---- ---------------------
--
----------- ----------
----- --------
------- -----
------------- ----------------
--这里的 partialsPath 表示 partials 所在的目录名称，需要指定相对于 relativeTo 选项的路径。
使用 partials 时，直接在视图中使用 {{> header}} 指令即可：
--- -------- --------------------
六、使用 helpers
在 handlebars 中，helpers 可以用于扩展模板语言，例如格式化日期、计算数值等操作。Hapi 视图引擎选项中可以使用 helpersPath 属性来指定 helpers 所在的目录，然后在视图中使用该 helper。
以下是一个名为 uppercase.js 的 helper 示例：
-------------- - -------- ------ - ------ ------------------------- --
在视图引擎选项中指定 helpers 目录：
----- ------- - -
-------- -
---- ---------------------
--
----------- ----------
----- --------
------- -----
------------- -----------------
------------ ---------------
--使用 helper 时，可以在视图中使用 {{uppercase message}} 指令：
--------------- --------------
七、总结
Hapi 提供了 vision 插件来支持服务器端渲染，并支持多种常用的模板引擎、partials 和 helper，可以满足大多数服务器端渲染需求。在使用 Hapi 进行服务器端渲染时，需要配置正确的视图引擎选项，然后使用 handler 中的 view 方法渲染视图。示例代码说明了如何在 Hapi 中使用视图引擎、partials 和 helper，可以供读者参考。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/654895c37d4982a6eb2d9c98