什么是 SSR
SSR (Server Side Rendering)，即服务端渲染。它通过在服务器上处理组件、应用程序和路由等内容，最终向客户端提供整个 HTML 页面以及相关的 CSS 和 JavaScript。与 SPA (Single Page Application) 不同，SSR 更加适合 SEO (Search Engine Optimization)、性能优化、首屏渲染速度以及可靠性方面。
为什么使用 Hapi
Hapi 是 Node.js 开发的用于构建 Web 应用程序的轻量级框架。相对于其它的 Node.js 框架，Hapi 更加注重安全性、可扩展性、插件化处理以及 API 的实时性。
在 Hapi 中使用 SSR
接下来，我们将会在 Hapi 中使用 SSR。首先，我们需要先安装两个依赖包：
npm install react react-dom --save npm install @hapi/vision @hapi/inert gluebell/tv --save-dev
| 依赖包 | 说明 |
|---|---|
| react | React 库 |
| react-dom | React 渲染库 |
| @hapi/vision | 使用 handlebars 作为模板引擎 |
| @hapi/inert | 处理静态文件 |
| gluebell/tv | tv 是 Hapi 针对 vision 扩展的插件 |
接着，我们需要创建一个名为 index.js 的文件，输入以下代码：
-- -------------------- ---- -------
----- ---- - ----------------
----- ---- - ----------------------
----- ------ - ------------------------
----- ----- - -----------------------
----- -- - -----------------------
----- ------ - -------------
----- -----
----- -----------
---
----- ---- - ----- -- -- -
----- ------------------------
----- -----------------------
--------------
-------- -
----- --
--
----- -------------------- ---------
----------- -------------------- -------- -----------
------- ---------
---
--------------
------- ------
----- ---------
-------- --------- -- -- -
------ --------------- -
------ ------- --------
-------- -------- -- -----
---
-
---
----- ---------------
------------------- ------- -- ---- -----------------
--
-------------------------------- ----- -- -
-----------------
----------------
---
-------其中，使用 @hapi/vision 和 @hapi/inert 处理视图模板和静态文件，并且使用 gluebell/tv 扩展视图模板实现 SSR。此外，我们还创建了一个基本的路由 /hello，用于测试模板渲染。
在 views 目录下，我们需要创建一个名为 hello.html 的模板文件，输入以下代码：
-- -------------------- ---- ------- --------- ----- ------ ------ ------ ---------------- ---------- ----- ---------- ------ ---------------- --------------------------------------------------------------------- ------- ------ ------- ------- ------- ----- ---------------- -------- -------------------------- ------- -------
其中，我们使用 {{ title }} 和 {{ message }} 插值渲染视图，同时加载了 Bootstrap 样式库和客户端 bundle.js。
最后，我们需要使用 react 和 react-dom 创建客户端 bundle.js，将其添加到 /public 中。以下为示例代码：
import React from 'react';
import ReactDOM from 'react-dom';
const App = () => (
<div>Hello, World!</div>
);
ReactDOM.hydrate(<App />, document.getElementById('root'));其中，我们使用 react 和 react-dom 创建应用程序，使用 ReactDOM.hydrate 渲染 DOM，其会在浏览器端完成 Vue 应用的初始化工作。
总结
本文主要介绍了如何在 Hapi 中使用 SSR 渲染。我们使用了 Hapi、react、react-dom 以及相关插件和库，最终实现了一个基本的应用程序。在实际开发中，我们可以进一步优化 Hapi 对路由的处理、部署和安全性等方面。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64c87c8b5ad90b6d0413b9b8