认识 Vue SSR

什么是Server-Side Rendering（SSR）

Server-Side Rendering（SSR）指的是在服务器上渲染完整的HTML，返回给浏览器显示。

为什么需要SSR?

一般来说，使用Vue框架开发网站默认是(Client-Side Rendering)CSR的方式渲染的。CSR的流程：

1. 浏览器请求服务器
2. 服务器下发一个空的HTML文件（通常只有挂载Vue应用的DOM根节点，以及需要加载的JS和CSS文件）
3. 浏览器解析HTML文件，去服务器或者CDN节点请求相关资源
4. 执行JS脚本， 初始化Vue应用，过程中可能会请求服务器接口获取数据
5. 完成后挂载到DOM上，浏览器渲染页面出现内容

CSR存在以下痛点：

1. 用户会先看到一个白屏的页面，需要等待JS执行完成后才能看到页面内容
2. 由于初始HTML不存在有意义的内容，搜索引擎爬取不到内容，SEO的效果较差

上诉问题在CSR的方式下，也有一些解决方案，比如HTML内容默认展示loading或内容骨架屏，应用初始化后剔除；通过增加meta标签，提升SEO效果等。 但如果想彻底解决上诉痛点，就需要将应用改造成SSR，接下来看下SSR的流程以及它对比CSR的优缺点。

SSR的流程：

1. 浏览器请求服务器
2. 服务器聚合数据，执行渲染Vue应用渲染，将渲染结果插入HTML后返回
3. 浏览器获得一个可以直接展示的页面（此时页面还不能交互，因为页面只是静态的HTML）
4. 接着浏览器会执行HTML相关的JS文件，这个过程中，Vue 会创建一个与服务端完全相同的应用实例，然后将每个组件与它应该控制的 DOM 节点相匹配，并添加 DOM 事件监听器，这一步称为“激活”

SSR的核心就是在服务端完成渲染返回有内容的HTML。项目使用SSR可以带来以下优势：

优点	说明
更快的首屏渲染	用户能更快看到内容
更好的 SEO	搜索引擎能直接抓取 HTML
更好的社交分享体验	预览图、描述等元信息可被正确读取

同时，和CSR相比它也有一些额外的代价

缺点	说明
部署复杂且加重服务端负载	需要运行 Node.js 服务，而非纯静态文件
开发复杂度较CSR会更高	比如要考虑运行环境差异（服务端没有 window、document）

两种方式都有各自的使用场景，根据不同项目的诉求合理选择即可。一般来说对关注首屏加载速度以及期望有更高搜索排名的站点会优先考虑SSR。

项目实践

接下来，进入项目的实践，此处的demo项目用的是monorepo的结构，前端代码在client用Vue3+Vite实现,server则是用Eggjs,当然其他node框架也是相同的。

P.S. 官方文档给出了一些更加通用的方案https://cn.vuejs.org/guide/scaling-up/ssr#higher-level-solutions, 提供了开箱即用的SSR能力。

实现原理