关于SSR的🤔：

各前端框架官方提供的 SSR 功能，不动业务源码，新增一层抹平层 nodejs环境 和 浏览器环境，实现一套代码打包2个产物支持 浏览器 和 nodejs环境

就很类似现在做的一码两端(一套代码打包2个产物支持 浏览器环境 和 APP webView 环境)

或者 微前端，不动多个内管应用的业务源码，整合到一起，新增一层抹平层

因此学习官方提供的 SSR 底层原理，如何优雅的实现抹平层，可以很好的帮助自身的架构能力

Vue官方文档-SSR

学习 Vue 原理时都会有一大章节讲解运行时浏览器 渲染器(把 template 转译为 render函数, 执行 render函数 渲染真实DOM)

而 SSR 则是在静态服务器响应时 渲染器(把 template 转译为 render函数, 执行 render函数 渲染成 html字符)， 并且 浏览器运行时需要对这些 html字符 做 激活(hydrate) 处理

而 一些在静态服务器响应时 还要调接口或数据处理操作 的时候，意味着

• 静态服务器也需要执行源码的逻辑
• 浏览器运行时也要执行源码的逻辑 👆 这种现象称为 同构的(Isomorphic) 或 通用的(Universal)

缺点： 同构资源的处理 劣势在于程序需要具有通用性。结合 Vue 的钩子来说，能在 SSR 中调用的生命周期只有 beforeCreate 和 created，这就导致在使用三方 API 时必须保证运行不报错。在三方库的引用时需要特殊处理使其支持服务端和客户端都可运行。

部署构建配置资源的支持 劣势在于运行环境单一。程序需处于 node.js server 运行环境。

服务器更多的缓存准备 劣势在于高流量场景需采用缓存策略。应用代码需在双端运行解析，cpu 性能消耗更大，负载均衡和多场景缓存处理比 SPA 做更多准备。