什么是服务器端渲染 (SSR)？
服务器端渲染 (Server-side Rendering, SSR) 是指将页面所有的数据都在服务器端生成，并将最终生成的 HTML 直接返回给浏览器进行展示，这样可以大大减少浏览器的工作量，提高网站的性能和用户体验。
相对于客户端渲染 (Client-side Rendering, CSR) 来说，服务器端渲染具有以下优点：
- 更快的首屏加载速度，避免了浏览器加载 JS 脚本、请求接口等过程
- 更利于 SEO，可以使搜索引擎抓取到完整的页面内容
- 更友好的用户体验，避免了大量的白屏时间和页面卡顿现象
Hapi 框架简介
Hapi 是一个基于 Node.js 的 Web 框架，它专注于构建可扩展的应用程序。通过 Hapi 提供的插件机制，可以轻松地扩展路由、数据处理、缓存、认证等各种功能。
在 Hapi 框架中实现 SSR
Hapi 提供了视图引擎 View 插件，可以在服务器端渲染基于 Handlebars、EJS、Pug 等模板引擎的视图文件。我们可以利用这个插件来实现 SSR。
安装和配置
首先，需要安装 Hapi 和 View 插件：
npm install hapi @hapi/vision handlebars --save
然后，在 Hapi 的初始化配置中添加 view 配置项，并注册 View 插件：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------ - ------------------------
----- ---------- - ----------------------
----- ------ - --- -------------
----- -----
----- -----------
---
----- ---- - ----- -- -- -
----- ------------------------
--------------
-------- -
---- ----------
--
----------- ----------
----- ---------
---
----- ---------------
------------------- ------- -- ---- -----------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------其中，engines 配置项指定了视图文件所使用的模板引擎，这里我们使用了 Handlebars；relativeTo 配置项指定了视图文件所在文件夹相对于项目根目录的路径；path 配置项指定了视图文件所在的文件夹。
编写视图文件
接下来，按照 Handlebars 模板引擎的语法编写视图文件，例如 views/index.hbs：
-- -------------------- ---- ------- --------- ----- ------ ------ ----- ---------------- ------------------------ ------- ------ ------------------ ------------------ ------- -------
编写路由
在 Hapi 中，路由可以使用 server.route() 方法添加。我们需要为 / 路径添加一个路由，用于渲染 index.hbs 视图文件，并将需要渲染的数据传递给视图文件：
-- -------------------- ---- -------
--------------
------- ------
----- ----
-------- --------- -- -- -
------ --------------- -
------ ----- --- ------
-------- ------- -------
---
-
---在该路由中，h.view() 方法将以 views 配置项中指定的路径为基础，拼接上第一个参数 index，找到 views/index.hbs 视图文件，并将第二个参数对象 {title: 'Hapi SSR Demo', message: 'Hello, World!'} 作为渲染视图的数据源。
运行应用程序
保存以上代码为 app.js 文件，在命令行中执行 node app.js 命令启动应用程序，然后在浏览器中访问 http://localhost:3000，就可以看到服务器端渲染的页面内容了。
总结
通过对 Hapi 框架的视图引擎 View 插件的使用，我们可以方便地实现服务器端渲染 (SSR)，提高网站的性能和用户体验。要使用 Hapi 框架实现 SSR，需要掌握 Handlebars 模板引擎和 Hapi 的路由机制，但是由于 Hapi 提供的插件机制十分灵活，所以也可以根据自己的实际情况选择自己熟悉的模板引擎来实现 SSR。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64f96514f6b2d6eab30e7549