前言
随着 Web 应用的复杂度和用户交互需求的增加，前端技术也不断发展和更新。服务器端渲染(SSR)在提高首屏加载速度和 SEO 友好性等方面具有优势，越来越受到开发者的重视。
本文就以 Koa.js 为基础，详细介绍如何搭建一套完整的 SSR 环境。
目录
- Koa.js 简介
- SSR 原理
- 搭建 SSR 环境
- 开发环境搭建
- 生产环境搭建
- SSR 实战演示
- 服务端渲染实现
- 客户端渲染实现
- SSR 整合实现
- 总结和参考
Koa.js 简介
Koa.js 是 Node.js Web 框架中一个优秀的自用事件驱动的框架，由 Express 原班人马打造。相比于 Express，Koa.js 更加简洁、优雅，而且具备更好的性能。
SSR 原理
在传统的客户端渲染中，浏览器对于每一个请求进行返回前，客户端的 JS 会向服务端发送请求，服务端将数据返回到客户端，JS 将数据填充到页面上。但是这也带了一个问题：在低速网络情况下，用户会看到页面的 loading，直到客户端发送完所有请求并将数据填充到页面上，这给用户带来很差的体验。
而在 SSR 中，后端渲染出页面后将渲染好的页面一并返回，浏览器拿到 HTML 文档和所需的静态资源后即可直接进行解析和渲染，不需等待客户端的 JS 请求数据。因此 SSR 可以比纯客户端渲染更快地呈现视图，提高用户体验。
搭建 SSR 环境
开发环境搭建
首先，在开始项目前先安装 Server-Side Rendering 的必要依赖项。
yarn add koa @koa/router koa-static koa-mount koa-mount-history-fallback handlebars
在搭建 SSR 环境的过程中，我们需要用到 handlebars 这个模板引擎来渲染我们的视图，因此我们需要先安装依赖。
生产环境搭建
在上线前我们需要将开发环境打包并压缩，这里推荐使用 webpack 来进行打包。
执行命令：
yarn add webpack webpack-cli webpack-dev-server
在安装 webpack 和 webpack-cli 后，需要创建 webpack.config.js 文件。
在 webpack.config.js：
-- -------------------- ---- -------
----- ---- - ----------------
----- ------- - -------------------
-------------- - -
------ -
---- ----------------
--
------- -
----- -------------------- ----------
--------- ------------------
--
------- -------
------- -
------ -
-
----- --------
-------- -----------------
---- ----------------
-
-
--
-------- -
--- -------------------------------
--- ----------------------
----------------------- ----------------------------
---
--- ---------------------------------
--
----- -
----------- ------
---------- -----
-
--配置项说明：
- entry：项目打包入口。
- output：打包输出目录。
- target：告诉 webpack 打包后的代码运行环境。
- module：定义规则，如发现 .js 文件使用 babel-loader 处理。
- plugins：webpack 插件。
- node：Webpack 是用于 Node.js 编写的，可以使用本地模块和所有 Node.js 全局变量，但是浏览器没有这些。
SSR 实战演示
这里我们将演示三种不同的情况：
- 服务端渲染
- 客户端渲染
- SSR 整合实现
服务端渲染实现
首先我们先配置服务端渲染的路由。
在 server/index.js 文件：
-- -------------------- ---- -------
----- --- - ---------------
----- ------ - -----------------------
----- --------- - ----------------------
----- -------- - ---------------------
----- ----------------------- - --------------------------------------
----- ---------- - ----------------------
----- ---- - ----------------
----- -- - --------------
----- --- - --- ------
-------------------------------------- -------------
----- ------ - --- ---------
--------------- ----- ----- -- -
----- ---- - -
------ --- ---- -------
------------ --- ---- -------------
----- ----- -- - ------ ---- --- --- ------
------ -
-
------ ---- ----- ------
------------ ----- -- --- ----- ------
----- ----- ----- -- --- ----- ---- ---- -----
-- -
------ ---- ------ ------
------------ ----- -- --- ------ ------
----- ----- ----- -- --- ------ ---- ---- -----
-- -
------ ---- ----- ------
------------ ----- -- --- ----- ------
----- ----- ----- -- --- ----- ---- ---- -----
-
-
--
----- ------ - ------------------------------------ ---------------------- --------
----- -------- - ---------------------------
----- ---- - ---------------
-------- - -----
---
-------------------------
--------------------- ------------------------- ------ ------------- -----
--------------------------- -- ----- -- -- -
------------------- --------- -- ---- ------------------ -- --------
---代码说明：
- app.use( KoaStatic( path.join( __dirname,'../dist' ) ) )：使用 koa-static 中间件来让 Koa 使用我们已经打包并压缩好的资源文件。
- const router = new Router( )：新建一个路由器对象。
- router.get( '/' )：在 root 路径下创建一条路由。
- const source = fs.readFileSync( ... )：用于加载我们已经打包好的视图模板 page.html。
- const template = handlebars.compile( source )：编译模板。
- ctx.body = html：返回编译后的模板。
客户端渲染实现
我们先创建客户端渲染的路由。
在 client/index.js 文件：
-- -------------------- ---- -------
------------- - -- -- -
-------------------
----------- -- -
------ -----------
--
------------ -- -
--- ---- - ---
------------------- -- -
---- -- -
----
----------------------
--------------------------
-------------------
-----
--
---
------------------------------------------ - -----
---
--这里我们在客户端使用 fetch 进行数据请求，将获取到的数据插入到页面中，以此实现客户端渲染。
SSR 整合实现
对于整合，我们不需要写两份路由代码，而是只需要牺牲一定的性能，在服务端先将渲染好的页面注入一部分 JS 代码，然后再让客户端进行渲染。
首先创建两份相应的 HTML 文件夹，一个名为 client，一个名为 server。在这两个文件夹内分别配置要使用的 JS 文件并引入相应的静态资源。
在 server/index.js 文件：
-- -------------------- ---- -------
----- --- - ---------------
----- ------ - -----------------------
----- --------- - ----------------------
----- -------- - ---------------------
----- ----------------------- - --------------------------------------
----- ---------- - ----------------------
----- ---- - ----------------
----- -- - --------------
----- --- - --- ------
-------------------------------------- --------------------
----- ------ - --- ---------
--------------- ----- ----- -- -
----- ---- - -
------ --- ---- -------
------------ --- ---- -------------
----- ----- -- - ------ ---- --- --- ------
------ -
-
------ ---- ----- ------
------------ ----- -- --- ----- ------
----- ----- ----- -- --- ----- ---- ---- -----
-- -
------ ---- ------ ------
------------ ----- -- --- ------ ------
----- ----- ----- -- --- ------ ---- ---- -----
-- -
------ ---- ----- ------
------------ ----- -- --- ----- ------
----- ----- ----- -- --- ----- ---- ---- -----
-
-
--
----- ------ - ------------------------------------ ----------------------------- --------
----- -------- - ---------------------------
----- ---- - ---------------
----- -- - -
------------- - -- -- -
----- ----- - ---------------------------------
-------------------
----------- -- -
------ -----------
--
------------ -- -
--- ---- - ---
------------------- -- -
---- -- --
----
-----------------------
---------------------------
--------------------
-----
---
---
--------------- - -----
---
--
--
-------- - ----------------------- ---------------------------------
---
-------------------------
--------------------- ------------------------- ------ ------------- -----
--------------------------- -- ----- -- -- -
------------------- --------- -- ---- ------------------ -- --------
---总结和参考
通过以上实战演示可以看到，SSR 的实现并不复杂，而且可以大大优化我们 Web 应用的性能。本文只是一个基础的实战演示，如果你想要深入了解 SSR 的知识，可以参考下面的资料。
- Koa.js 官方文档
- Server-Side Rendering in React
- Understanding Server-Side Rendering in Vue.js
- Vue.js 服务器端渲染指南
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64cb02ad5ad90b6d041e4de3
