一份完整的 Koa.js 服务器端渲染 (SSR) 实战指南

阅读时长 12 分钟读完

前言

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

本文就以 Koa.js 为基础,详细介绍如何搭建一套完整的 SSR 环境。

目录

  1. Koa.js 简介
  2. SSR 原理
  3. 搭建 SSR 环境
    • 开发环境搭建
    • 生产环境搭建
  4. SSR 实战演示
    • 服务端渲染实现
    • 客户端渲染实现
    • SSR 整合实现
  5. 总结和参考

Koa.js 简介

Koa.js 是 Node.js Web 框架中一个优秀的自用事件驱动的框架,由 Express 原班人马打造。相比于 Express,Koa.js 更加简洁、优雅,而且具备更好的性能。

SSR 原理

在传统的客户端渲染中,浏览器对于每一个请求进行返回前,客户端的 JS 会向服务端发送请求,服务端将数据返回到客户端,JS 将数据填充到页面上。但是这也带了一个问题:在低速网络情况下,用户会看到页面的 loading,直到客户端发送完所有请求并将数据填充到页面上,这给用户带来很差的体验。

而在 SSR 中,后端渲染出页面后将渲染好的页面一并返回,浏览器拿到 HTML 文档和所需的静态资源后即可直接进行解析和渲染,不需等待客户端的 JS 请求数据。因此 SSR 可以比纯客户端渲染更快地呈现视图,提高用户体验。

搭建 SSR 环境

开发环境搭建

首先,在开始项目前先安装 Server-Side Rendering 的必要依赖项。

在搭建 SSR 环境的过程中,我们需要用到 handlebars 这个模板引擎来渲染我们的视图,因此我们需要先安装依赖。

生产环境搭建

在上线前我们需要将开发环境打包并压缩,这里推荐使用 webpack 来进行打包。

执行命令:

在安装 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 实战演示

这里我们将演示三种不同的情况:

  1. 服务端渲染
  2. 客户端渲染
  3. 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 的知识,可以参考下面的资料。

来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/64cb02ad5ad90b6d041e4de3

纠错
反馈