一份完整的 Koa.js 服务器端渲染 (SSR) 实战指南-JavaScript中文网-JavaScript教程资源分享门户

前言

随着 Web 应用的复杂度和用户交互需求的增加，前端技术也不断发展和更新。服务器端渲染(SSR)在提高首屏加载速度和 SEO 友好性等方面具有优势，越来越受到开发者的重视。

本文就以 Koa.js 为基础，详细介绍如何搭建一套完整的 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 文件并引入相应的静态资源。