Hapi 是一个流行的 Node.js 框架，用于快速构建 RESTful API 和 Web 应用程序。它提供了一组强大的工具和插件，可轻松地实现各种功能。其中，服务器端渲染是 Hapi 中值得一提的特性之一。
在本文中，我们将探讨如何在 Hapi 中使用服务器端渲染，并提供示例代码和深入的学习指导，帮助您更好地了解这个有用的功能。
什么是服务器端渲染？
在 Web 应用程序中，有两种渲染页面的方式：客户端渲染和服务器端渲染。
客户端渲染是指 Web 浏览器通过 JavaScript 运行时动态地生成页面内容。这样做虽然可以提高交互性和响应性，但也带来了一定的性能和 SEO（搜索引擎优化）问题。
与客户端渲染相对的是服务器端渲染，它是指在服务器端生成静态页面，然后传输给浏览器。这种方法可以提高页面的首次载入速度和 SEO 能力，但也存在一些缺点，例如无法交互性差、不易缓存等。
在构建 Web 应用程序时，我们需要权衡这两种渲染方式。在某些情况下，服务器端渲染是一种更好的选择，尤其是在需要大量首次渲染的页面中，例如首页、文章列表页等。
Hapi 中的服务器端渲染
Hapi 提供了一个插件 vision，它是一个视图渲染引擎插件，可以用于在服务器端生成 HTML 页面。它支持多种模板引擎，如 Handlebars、EJS、Jade 等。
下面是如何在 Hapi 应用中使用 vision 插件：
// www.javascriptcn.com code example
const Hapi = require('@hapi/hapi');
const Handlebars = require('handlebars');
const Vision = require('@hapi/vision');
const server = Hapi.server({
port: 3000,
host: 'localhost'
});
const init = async () => {
await server.register(Vision);
server.views({
engines: {
html: Handlebars
},
relativeTo: __dirname,
path: 'views',
});
server.route({
method: 'GET',
path: '/',
handler: (request, h) => {
return h.view('index', {
title: 'Hapi 网站',
message: '欢迎来到 Hapi 世界！'
});
}
});
await server.start();
console.log('Server running on %s', server.info.uri);
};
process.on('unhandledRejection', (err) => {
console.log(err);
process.exit(1);
});
init();上面的代码中，我们依次完成了以下操作：
- 引入
@hapi/hapi、handlebars和@hapi/vision模块 - 创建一个 Hapi 服务器实例，并设置端口和主机
- 注册
vision插件 - 配置视图插件，指定模板引擎，模板文件路径等
- 设置路由，处理 GET 请求，并返回渲染的 HTML 页面
接下来我们在 views/index.html 中定义模板：
// www.javascriptcn.com code example
<!doctype html>
<html>
<head>
<title>{{title}}</title>
</head>
<body>
<h1>{{message}}</h1>
</body>
</html>当访问 localhost:3000 时，将会渲染这个模板，并传递 title 和 message 参数。
这里我们使用了 Handlebars 模板引擎，Hapi 还支持其他的模板引擎。如果您需要使用其他的模板引擎，请查看官方文档。
Hapi 的视图助手
Hapi 还提供了一些内置的视图助手来处理视图中的逻辑。视图助手是一些函数，可以在渲染视图时调用。
以下是一些常用的视图助手：
eq：判断两个值是否相等；if：条件判断；unless：除非指定的条件为真时才执行；each：循环集合；isAuthenticated：判断当前用户是否已经登录；url：生成链接地址。
这里是一个使用 each 视图助手的例子：
<ul>
{{#each users}}
<li>{{this}}</li>
{{/each}}
</ul>其中 users 是一个数组，渲染后会依次生成每个元素的 li 标签。
结语
本文介绍了如何在 Hapi 应用中使用服务器端渲染，使用 vision 插件和 Handlebars 模板引擎。我们还介绍了 Hapi 的视图助手，并提供了示例代码和深度学习指南。
服务器端渲染是一个非常有用的技术，可以提高 Web 应用程序的性能和 SEO 能力。如果您正在开发 Hapi 应用程序，并需要服务器端渲染，那么 Hapi 的 vision 插件是一个很好的选择。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67d67dd5a941bf7134c4501b