优化向：单页应用多路由预渲染指南1
需积分: 0 108 浏览量
2022-08-03
16:52:06
上传
评论
收藏 1.19MB PDF 举报
优化向：单⻚应⽤多路由预渲染指南
前⾔
2017 年 10 ⽉ 13 ⽇
Ajax 技术的出现，让我们的 Web 应⽤能够在不刷新的状态下显⽰不同⻚⾯
的内容，这就是单⻚应⽤。在⼀个单⻚应⽤中，往往只有⼀个 html ⽂件，
然后根据访问的 url 来匹配对应的路由脚本，动态地渲染⻚⾯内容。单⻚应
⽤在优化了⽤户体验的同时，也给我们带来了许多问题，例如 SEO 不友
好、⾸屏可⻅时间过⻓等。服务端渲染（SSR）和预渲染（Prerender）技
术正是为解决这些问题⽽⽣的。
阅读本⽂，你能够了解到什么是预渲染、预渲染与服务端渲染的异同以及预
渲染在 Vue.js 项⺫中的使⽤。
服务端渲染与预渲染
⼀些概念
1. 客户端渲染：⽤户访问 url，请求 html ⽂件，前端根据路由动态渲染⻚
⾯内容。关键链路较⻓，有⼀定的⽩屏时间；
2. 服务端渲染：⽤户访问 url，服务端根据访问路径请求所需数据，拼接
成 html 字符串，返回给前端。前端接收到 html 时已有部分内容；
3. 预渲染：构建阶段⽣成匹配预渲染路径的 html ⽂件（注意：每个需要
预渲染的路由都有⼀个对应的 html）。构建出来的 html ⽂件已有部分
内容。
下图简单展⽰了客户端渲染、服务端渲染和预渲染的请求流程。
剩余13页未读，继续阅读
评论0