在现代 web 应用中，为了提高性能和搜索引擎优化，服务端渲染（Server-Side Rendering，SSR）已经成为了一个需要掌握的基本技能。而在 Node.js 领域，Hapi 和 Angular 分别是常用的服务端框架和前端框架，本文将介绍使用 Hapi 和 Angular 实现 SSR 的指南和陷阱。
Hapi 简介
Hapi 是一个 Node.js Web 框架，由 WalmartLabs 团队开发，并在 2015 年开源。它有着良好的插件体系和强大的生态环境，能够快速构建出稳定、高性能的 Web 应用。
要使用 Hapi 实现 SSR，我们需要了解以下几个核心概念：
- 插件（Plugin）：Hapi 中的插件是对应用进行功能扩充和模块化管理的基本单位，可将应用拆分为多个模块，每个模块对应一个插件。例如，我们可以为 Hapi 引入一些常用的功能，例如 CORS、日志、JWT 鉴权等。
- 路由（Routes）：路由定义了请求到哪个 URL 和 HTTP 方法该怎么响应的规则，是应用的基本构建单元。Hapi 的路由系统风格简单，支持各种带有参数、可选参数和正则表达式的 URL 规则。
- 请求处理（Handler）：请求处理定义了路由规则匹配后，执行的具体代码逻辑（例如读取数据库、处理文件等），可以是一个函数或一个包含多个方法的对象。
- 视图（Views）：视图是返回 HTML 等格式响应时使用的渲染引擎，可以集成 Hapi 其中内置的 Handlebars、EJS、Pug 等，也可以使用其他第三方引擎。
- 插入点（Point）：在生命周期处理过程中，Hapi 有许多插入点，使得开发者可以在处理请求的各个阶段进行干预和修改。
有了以上概念基础，我们就可以开始了解如何在 Hapi 中开启 SSR。
Angular SSR 简介
Angular 是一款流行的前端 JavaScript 框架，由 Google 团队开发。在 2016 年，Angular 2.0 发布之后，其引入了服务器端渲染的概念，使得我们可以使用 Angular 来实现 SSR。
在 Angular SSR 中，我们需要先使用 Universal API 生成网站内容，并将这些内容注入到页面中。Universal API 可以理解为访问 Angular 应用的接口，这些接口将产生对应的 HTML、CSS 和 JavaScript 文件，用于在客户端和服务端共享渲染逻辑。
Angular SSR 的核心就是使用 Angular Universal 生成的网站内容和 Hapi 中的路由、视图来产生页面结构，这样就能够提供搜索引擎优化和性能优异的单页应用 SSR。
Hapi 和 Angular SSR 实现
下面我们将介绍如何通过 Angular SSR 在 Hapi 中实现 SSR。
1. 创建 Angular 应用
首先，我们需要搭建一个 Angular 应用，并开启服务器端渲染。具体步骤可以参考官方文档。在使用 Angular CLI 创建应用时，我们可以通过 ng new 命令创建一个已开启 SSR 的 Angular 应用：
ng new my-app --universal
2. 创建 Hapi 应用
接下来，我们需要使用 Hapi 创建一个 Web 服务器，并为 Angular 提供 SSR 功能。首先在 package.json 文件中加入以下依赖：
{
"dependencies": {
"hapi": "^18.4.1",
"@nguniversal/hapi-engine": "^8.0.1",
"@nguniversal/common": "^8.0.0",
"@nguniversal/express-engine": "^8.0.1"
}
}然后在项目中创建一个 server.js 文件，引入依赖，创建一个 Hapi 实例并注册 Angular 的 SSR 引擎：
-- -------------------- ---- -------
----- ---- - ----------------
----- - ------------ - - ------------------------------------
----- - ---------------- - - ----------------------------------------------------
----- --- - --- ------------- ----- ---- ---
----- -------- ------- -
-- ------- --- --
----- - ------------------------- --------------- - - ------------------------------
-- -- ---- --
----- --------------
------- -------------
-------- -
---------- -------------------------
---------- -
---------------------------------
-
-
---
-- -----
----- ------------
------------------- ------- --- ------------------
-
--------在该文件中，我们首先引入了以上依赖，在响应请求时使用 ngHapiEngine 引擎渲染页面内容并返回给客户端。
3. 创建路由和请求处理
接下来，我们需要在 Hapi 中创建路由和请求处理，确保能够正确渲染 Angular 组件。在 Hapi 中创建路由和请求处理的方式很简单：
app.route({
method: 'GET',
path: '/{param*}',
handler: (request, h) => h.view('index')
});在这里，我们使用 h.view() 方法渲染 index 视图返回给客户端。视图模板通常包含一个 app-root 元素，它将被 Angular 填充为一个完整的组件树。视图模板可以是 Handlebars、EJS 等引擎。
4. 运行应用
最后，我们使用 npm run build:ssr 和 npm run serve:ssr 命令构建和启动 Angular SSR 应用，使用 node server.js 命令启动 Hapi 服务器，访问 http://localhost:3000 可以看到一个完整的 SSR 应用。
指南和陷阱
SSR 的实现本身就是一件比较复杂的事情，我们需要注意以下几个问题：
1. 路由设置
- 我们需要确保所有路由都正确匹配到，并正确使用 Angular 的 Router 进行导航。
- 对于针对不同 URL 或者多级路由的情况，我们还需要使用 Hapi 的
segment可选参数来匹配不同的路由。
2. 状态管理
- 对于使用状态管理工具（例如 NgRx）的情况，我们需要使用
TransferHttpCacheModule、ServerTransferStateModule和服务端版的状态层来确保状态正确传递。
3. 服务端一个对应一个
- 我们需要理解服务端的请求是无状态的，并且必须始终与客户端保持一致。为了确保服务端和客户端的一致性，我们需要确保客户端没有覆盖服务端添加的特定 HTML 或元素。
4. 性能优化
- 我们需要一定的技巧来加速 SSR，例如使用缓存、去掉不必要的请求等。
总的来说，Hapi 和 Angular SSR 结合可大大提高 web 应用的性能和 SEO 情况。但同时，SSR 的实现也包含一些陷阱和需要注意的点，需要我们小心谨慎并不断优化才能发挥出最大的作用。
总结
本文介绍了如何以 Hapi 和 Angular 为例，使用 SSR 实现一个 Web 应用的过程和注意事项，并阐述了相关的核心概念和技术。SSR 技术是 web 应用中不可忽视的重要环节，希望读者能够在实践中有所启示。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/6474718a968c7c53b01d248f