【笔记】服务端渲染SSR

2024-01-08 156 阅读3分钟

静态生成（SSG，Static Site Generation）

在构建的时候直接把结果页面html输出到磁盘，每次访问直接把生成好的html返回给客户端，相当于一个静态资源。

优势：

减轻服务器渲染压力，可以把生成的静态资源（html）放到CDN上，合理利用缓存。
有利于SEO，由于html已经提前生成好，不需要服务端和客户端去渲染。

局限性：

所有用户看到的都是同一个页面，类似静态网站。
在需要更新数据时，需要重新构建并部署整个网站，因此对于频繁更新数据的网站不适合。
用户体验不好，每次打开新页面都需要重新渲染整个页面，不能只渲染可变区域。
对于复杂的交互和动态效果的支持也比较有限。

服务端渲染（SSR，Server Side Rendering）

服务端渲染 SSR (Server-Side Rendering)，是指在服务端完成页面的html 拼接处理，然后再发送给浏览器，将不具有交互能力的html结构绑定事件和状态，在客户端展示为具有完整交互能力的应用程序。

适用场景

对 SEO 的支持至关重要。优势在于同步。
服务端和客户端分工明确，仍保留客户端路由管理、全局数据状态管理等功能，不会牺牲spa的特性（需区分是否由客户端路由跳转产生的访问）。
更短的首屏渲染时间。优势为网络差和设备性能差的设备场景，具体原因如下：
1. 接口请求在服务端进行，节省等待接口响应的时间。
2. 渲染DOM结构的步骤也放到了服务端执行，节省客户端渲染时间。（客户端性能差时尤其明显）
3. 浏览器加载资源，无需等待任何JS文件的加载，就可以渲染出初始页面，LCP和FCP性能指标很好。（客户端网络差时尤其明显）

不适用场景

同构资源的处理。 劣势在于程序需要具有通用性。结合 Vue 的钩子来说，能在 SSR 中调用的生命周期只有 beforeCreate 和 created，这就导致在使用三方 API 时必须保证运行不报错。在三方库的引用时需要特殊处理（使用条件控制，在特定的生命周期再允许渲染该组件）使其支持服务端和客户端都可运行。
部署构建配置资源的支持。 劣势在于运行环境单一，程序需处于 node.js server 运行环境。
服务器更多的缓存准备。 劣势在于高流量场景需采用缓存策略。应用代码需在双端运行解析，cpu 性能消耗更大，负载均衡和多场景缓存处理比 SPA 做更多准备。

SSR 渲染架构

遇到的问题

多页面打prod生产环境的正式包需要build多次，产生不同的entry.server.js；
ssr 时window对象不可用；

判断import.meta.env.SSR，区别client和server端的调用。
三方库的.css文件在ssr渲染不识别；

vite打包配置中，设置noExternral 防止被 SSR 外部化依赖项：
```
defineConfig({
  ...
  ssr: {
    noExternal: ['vant']
  },
})
```
所有业务的异步接口数据需要通过store获取，不然ssr不能渲染异步接口返回的数据；
onServerPrefetch 在SSR获取接口数据的使用场景；

SSR到CSR的降级；