前言
随着 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