在前端开发中，服务器端渲染 (Server-Side Rendering, SSR) 是目前较为流行的一种技术方案。它能够在服务器端将数据渲染成 HTML，然后再将 HTML 返回给客户端，从而加快页面的加载速度和提高 SEO。而 Fastify 是一个高效的 Node.js Web 框架，它的核心优势在于其极高的性能。
本文将介绍如何使用 Fastify 实现服务器端渲染。我们将重点讲解:
- SSR 的定义和原理
- Fastify 的安装和使用
- 构建一个最基本的 SSR 应用程序
- 优化你的 SSR 应用程序
什么是服务器端渲染 (SSR)
在传统的客户端渲染（Client-Side Rendering, CSR）模式下，客户端在加载网站时，服务器仅仅只是提供了一个空的 HTML 文件和相关的静态文件，其它组件的渲染操作都交给了浏览器端的 JavaScript 来完成，当然这也导致有一些缺点如：
- 全部应用逻辑都在浏览器端，会导致执行效率很低
- 搜索引擎无法爬取动态渲染的内容，导致 SEO 不友好
服务器端渲染 (SSR) 是一种将组件渲染为 HTML 的方法。它是将 Vue、React、AngularJS 和类似框架的代码执行在服务器端，将 HTML、CSS 和 JavaScript 应用程序的块返回给浏览器的过程。与客户端渲染（CSR）相反，SSR的优点包括：
- 更快的呈现首个页面，因为在初始加载时可以同时获取到完整的 HTML 内容
- 更好的 SEO，因为每个网页都是完整的 HTML 文档，可以被搜索引擎爬取
- 降低白屏时间，因为在客户端渲染权衡有可能在 JavaScript 异步加载时引发两者之间的等待
- 当 JavaScript 失败时，可以使用 SSR 来向用户提供一个基本的网站体验
- 在网络连接不佳的情况下，我们可以使用 SSR 让用户体验不受到影响。
Fastify 的安装和使用
Fastify 是一个用于构建 Web 应用程序的快速和低开销的框架。在使用 Fastify 之前，我们需要安装 Node.js 和 npm，并确保它们的版本是最新的。
使用 npm 安装 Fastify：
$ npm install fastify
要使用 Fastify，我们在 Node.js 项目中引入它：
const fastify = require("fastify")();Fastify 就是这么简单，现在开始写你的代码吧！
构建一个最基本的 SSR 应用程序
接下来我们将介绍如何使用 Fastify 实现一个最基本的 SSR 应用程序。
1. 创建一个 HTML 文件
创建一个 index.html 文件，内容如下:
-- -------------------- ---- -------
--------- -----
------
------
----- ----------------
-------------- --- ------------
-------
------
---- ---------
-----------
------
------- --------------------------
-------
-------2. 创建一个 Entry 文件
src/entry.js
-- -------------------- ---- -------
------ ------- ---- ----------
------ --- ---- ------
----- ------- - ------------
---------------- ----- --------- ------ -- -
--- -
----- --- - --- -----
--------- -------- ------- ----------
------ -
------ -
-------- -------- -- ------- --- -------
--
--
---
----- ---- - ----- -----------------------------
---------------------------- -------------
-----------------
- ----- ----- -
----------------------------
-
---
-------------------- -------- ----- -
-- ----- -
-----------------------
----------------
-
------------------- ------- -- -----------------------------------------------------
---3. 构建 Webpack 配置
使用 Webpack，我们可以将整个 SSR 应用程序打包成一个可执行的 JavaScript 文件。
webpack.config.js
-- -------------------- ---- -------
----- ---- - ----------------
----- - --------------- - - ----------------------
-------------- - -
----- -------------
------ -----------------
------- -------
------- -
--------- -----------
----- ----------------------- --------
--
-------- -
------ -
---- ----------------------- -------
--
----------- ------- --------
--
------- -
------ -
-
----- ---------
------- -------------
--
-
----- --------
------- ---------------
-------- ---------------
--
-
----- ---------
---- -------------------- --------------
--
--
--
-------- ---- -------------------
--4. 启动服务器
最后，通过运行以下命令启动服务器：
$ node dist/index.js
现在你可以使用任何浏览器访问你的 SSR 应用程序：
http://localhost:3000
优化你的 SSR 应用程序
实现了一个基本的 SSR 应用程序后，我们来看一下如何对其进行优化。
1. 使用缓存
服务器端渲染对性能来说是一个重量级的操作。对于复杂的页面，它可能需要大量时间来渲染每一个组件，这可能导致用户等待时间过长。因此，我们需要使用缓存机制来减少渲染时间。
Fastify 通过使用 LRU 算法提供了一个方便的缓存插件，可以通过以下方式来使用它：
-- -------------------- ---- -------
----- ------- - --------------------
-------------------------------------------- -
-------- ---------- -- -- --------
---------- ---- -- ------ ----- ----- -- -- -------
--------------- -
---------- -------------- ------------------ -- -- ---------- - ---
--
--Fastify 生成一个新的缓存实例并在 global 缓存变量中存储它。可以通过访问 server.cache 来访问缓存实例。所以每当我们要写入和读取缓存时，我们需要使用 server.cache。
-- -------------------- ---- -------
------------------- ----- -------- --------- ------ -
----- - ------ - - -------
--- --------- - ----- ----------------------------
-- ------------ -
--------- - ----- -------------------------------
----- ---------------------------- --------------- - ---------- -- - ---- --
-
-----
----------------------- ------------
---------------------
--generateCustomerPage 函数会生成一个带有 HTML 内容的对象。
2. 减少服务器渲染的负载
一个复杂的 Web 应用程序可能会需要大量过程来完成渲染。为了避免阻塞服务器的性能，我们可以使用线程池或 fork 子进程来完成渲染任务。
Fastify 为我们提供了一个名为 fastify-compress 的插件，可以将响应压缩到客户端以减少带宽和响应时间。如果你在响应的输出中看到这条消息：“unknown compression method”，那就需要安装相关扩展，如 zlib-dev、libz-dev、compress-dev。
const fastify = require("fastify")();
const fastifyCompress = require("fastify-compress");
fastify.register(fastifyCompress, { global: true });3. 使用异步组件
使用异步组件可以提高 SSR 的性能。Vue 的异步组件功能允许我们定义多个钩子，将组件分割成小块，只有在需要渲染时才会加载这些块。
Vue.component("async-component", () => import("./components/AsyncComponent.vue"));有了异步组件，就可以将大的应用程序分割成小部分，并在需要时渲染特定部分。对于大型应用程序或移动设备等有限资源的应用程序来说，这是非常重要的。
4. 优化 HTML 和 CSS
HTML 和 CSS 是构建好的 SSR 应用程序的一部分，并且会在初始加载时被立即下载。因此，我们需要考虑对这些文件进行优化。
HTML 和 CSS 可以被打包在一起，以减少网络请求的数量：
-- -------------------- ---- -------
------ -- ---- -----
------ ---- ---- -------
------ --- ---- ------
----- -------- - ----------------
-------------------- --------------
-------
--
----- -------- - -----------------------------------------------
---------
---
----- --------- - ---------------------
-- -----
---------------- ----- ----- ---- -- -
----- --- - ------------
----- ---- - ----- -----------------------------
------------------ - --------------- ----------- ---
--------------
---
-------------------- ----- -- -
-- ----- -
-------------------
----------------
-
------------------- --------- -- ---------------------------
---将 CSS 放在 HTML 的 head 部分引入：
-- -------------------- ---- -------
------
------
----- ----------------
------------- -----------
----- ---------------- ------------------------
-------
------
---- ---------------
------- -------------------------------
-------
-------再次运行 webpack，并在 HTML 中链接打包的 styles.css 文件：
$ webpack --mode production
5. 快速退出
如果服务器接收到退出信号，它会立即终止所有未完成的请求并退出进程。为了实现快速退出功能，我们可以使用：
process.on("SIGTERM", () => {
fastify.log.info("SIGTERM signal received");
fastify.close(() => {
fastify.log.info("Fastify closed");
});
});这将确保服务器尽快退出，而不是等待所有请求完成。
6. 开启缓存技术
通过开启缓存技术和启用性能优化，我们可以显著提高 SSR 的性能。在高端机器上，优化服务器端渲染过程可以加速 SSR 的响应时间和吞吐量。
-- -------------------- ---- -------
---------------------------------- -
-------- ----------
---------- ----
--------------- -
---------- -- --- -- - ---- ------ -- -- -- ---------- ---- - ---- - --- ---
--
---
------------------------- ----- --------- ------ -- -
--- -
----- - -- - - ---------------
----- ----- - ------------------------ -- -------- --- ------------
-- -------- -
------ ------------------------ ------ --- ---- ------ ---
-
----- ---- - ----- --------------------
------ ------------- --------------------------- --
--
---------------------------- -------------
------ -----------------
- ----- ----- -
-------------------- -----
----------------------------
-
---通过缓存和其他优化，我们可以实现更快的 SSR 应用程序和更好的用户体验。
总结
在本文中，我们展示了如何使用 Fastify 实现服务器端渲染 (SSR)。Fastify 是一个高性能的 Web 框架，使用它实现 SSR 的步骤非常简单。我们从头开始，介绍了 SSR 的定义与原理，然后讲解了如何使用 Fastify 搭建 SSR 应用程序，并对其进行了优化。我们涵盖了如何使用缓存、异步组件、快速退出以及完整的性能优化。现在你已经掌握了 Fastify 实现 SSR 的基本原理，可以开始构建自己的 SSR 应用程序了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb624b5ad90b6d0420451a
