导读 ：揭秘百度直播研发部 Web 利用 SSR 技术新玩法，在 CSR 目录下增加一个 JS 计算函数就能够让页面具备 SSR 能力。依靠端云协同驱动买通 SSR 技术要害门路、规模化落地引领高品质 Web 利用的市场价值。让咱们对这个小时级赋能计划一探到底。
全文 3608 字，预计浏览工夫 10 分钟
===
一、背景
从 CSR 到 SSG，网页信息从无到有残缺出现个性化内容滞后于 AJAX 申请，夯实拜访体验，晋升网页内容体量和平台品牌等级，满足消费者对更高质量体验的需要。同时内容服务型站点 SEO 推广也是要害因素，内容经营助于业务取得突破性增长。回归到晋升服务竞争力的外围上，SSR 技术独具后劲和翻新时机，各种”不走寻常路”的计划也比拟沉闷，独特指标都是使互联网 Web 利用优质化。
另一方面，SSR 也是 Web 服务倒退脉络迎来量变的分界点，赋能老本降落除了 SSR 技术自身的改良，更依赖于大规模的落地，通过体系工程的扭转，让开发者降级便捷，让服务更亲热用户。
二、诉求即指标
- 同构的 SSR：顶层设计上已不承受基于模板的 SSR 技术，因为异构的 TPL 和 JS 减少了页面组件的保护切换老本，基于业务与团队现状，咱们须要疾速迭代，一套代码 100% 复用，同时 JS 一体化同构的 SSR 能把组件代码侵入降到最低。
- 极速接入 ：页面开发者心愿集成在 CSR 工程下，简直为零的模块、我的项目和页面目录改变。一方面因为 CSR 是业务承载大头，另一方面是前端扩散的多个模块现状，迁入一个集中式的宏大工程内再拆成可控的小块，加上依赖关系治理，革新老本极大，为了接入 SSR 要重构甚至重写是减弱工程化 ROI 的。
- 开发体验 ：页面开发者更专一于组件代码自身，CSR 的开发部署形式，批改代码打包公布即可。心愿 BFF 服务编排和云端基础设施所有都以 NoOps 井井有条的运行。数据接口和字段复用更是根本诉求。
- 成果保障 ：应用服务端 HTML 后果渲染首屏，适当的利用缓存策略，减速受访缩短 FMP 工夫，晋升网页服务品质。SEO 敌对，利于内容密集型网页取得搜寻的曝光。
===
三、FaaS SSR 普世
面对以上挑战，用第一性原理来思考，回归到同构 SSR 技术的实质”是指在服务侧实现网页的 HTML 构造拼接并返回该富内容的文件，在浏览器侧再实现水合为其绑定状态与事件，成为齐全可交互页面的过程。”无论各个版本如何形容这个过程，在服务侧生成 Contentful HTML 分解成最根本的组成就是：组件和数据。源头上：组件是已有的，批改构建配置即可导出被引入；数据即 CSR 过程通过 AJAX 调用的后端接口响应数据，事实上也是明确的，只是须要在服务端进行 Server 到 Server 的调用，绝对于 CSR，SSR 须要数据提前到组件首次执行时传入。
建构在第一性原理上，咱们能够抽离出基于 PaaS 构建统一的 FaaS SSR 集结环境，具备服务预热、快速访问、弹性伸缩、容器隔离、低运维老本等长处，要害劣势在于补齐了 Web 利用的云开发辅助能力，在前端架构层面高效配合使 Web 利用反对原生的云端联结渲染，发明一种通用的同构计划。SSR 外围库更小更内聚可维护性更高，松耦合自治的模块可扩展性更好，并不会将各模块页面限定于特定的技术栈，开释组织后劲。因为 FaaS SSR 环境除了根本的 DevOps 外，只调度组件和数据，而保障组件在 Node 服务器上运行的办法是由组件自身导入的所应用框架的原生 API。
- Page Resources：SSR 过程所需的必要元素
- Template：页面模板，即 CSR 页面的 HTML，同时是 SSR 页面的模板。
- Bundle：组件打包的 bundle，这份供 Node.js Server 端进行 SSR 的 bundle 产物，须要 webpack 独自打包产出。
- FC：管制 SSR 过程的计算函数，实现 SSR 外围的钩子，在 Function Sandbox 中运行，能够自定义 SSR 后果。
- Data：填充组件的 BaaS 数据，通过调用 Backend Service 获取。
- Routing：路由页面申请及调度资源
- manifest.json：模块构建产出的资源清单。每个方向模块主动产出一份，申明上述 Page Resources 的资源等信息。
- module：模块的信息，manifest.json 门路、模块查问门路等信息。
- router：解析以后 Request 信息的 Lambda 函数，匹配到以后页面的 Template、Bundle、FC 信息，并向 FC 派发 HTTP 事件。
- BaaS：后端即服务，包含接口、存储、通信等 Backend Service。通过 Spec 形容即可交给 FaaS RPC 调用指标服务。
- Rendering：通过系列 Lambda 函数管道调用，注入整个过程的环境变量，包含获取并转换 BaaS 数据接口形容，通过 RPC 调用获取内容数据，合并组件和数据，回填 APP HTML 和模板，等等进行本质的 SSR 过程。
- Watching：服务日常运维提效相干，包含通用监控、日志传输、离线计算、服务观测等等。
4.1 组件响应
组件是同构的最小粒度，同构给了组件一种十分弱小、复用度极高、灵便多元的运行环境，事实上是客户端、边缘服务、核心服务的一个整合。咱们把职责繁多的组件内容展现和交互逻辑内聚在一起，让组件代码在端和云环境中至多执行两次，在服务器端环境下执行一次，产出网页的 Contentful HTML 构造，在浏览器端环境下再执行一次，水合接管页面的交互响应。组件能够依据不同阶段的全局环境标记做更加垂直细分化的 render 响应，来管制更多的个性化适配逻辑，通过在 FaaS 沙盒底层规模化残缺抹平，验证了绝大部分的组件零接入老本。即便组件不做响应，也能够通过实现 FC 操作 HTML 构造，响应申请后果。
4.2 接口形容
组件是页面骨架，数据是页面灵魂。在 FaaS SSR FC 中应用 JSON Scheme 语言形容的接口，由 FaaS RPC 直达解决引擎将浏览器的源申请转换为对应的 BaaS 调用，链接上下游数据通信，具备缩短调用链路、减速后果响应的个性。该形容标准包含：URI 地址、动态参数、动静参数、申请头、申请办法、权限校验管制、响应捕捉机制、存储库等其它公有协定格局。
4.3 构建革新
在构建阶段的指标是明确模块内不同资源的规定边界，投合源代码资源，通过加载、编译、依赖剖析，产出多元多层次的产物，公布至 BFF 利用，供大规模的部署。同时通过工程自动化的伎俩使流程线可复制。新增产物包含：模块清单、页面 Bundle、SSR 计算函数。
4.4 开发体验
技术计划要开辟落地场景，必须先”本地化”再”生产化”，只有建设晦涩的本地开发体验，能力有可能在线下获取开发者用户，开展单干共建。基于 FaaS 的 SSR，即使页面开发者没有服务端 DevOps 教训、没有脚手架，也能够通过构建插件引入 FaaS SDK，不耦合服务端框架，进一步缩小开发工夫和老本，本地实时看到 SSR 后果，让你的网页霎时优质化。
4.5 危险管制
”咱们不能彻底阻止有不兼容的组件代码、上游 BaaS 黑洞等等，但能够防止当问题产生时间接影响到用户拜访。”在这个思路的领导下，通过扭转 BFF 软件架构，创立了”两存一降”架构设计理念，它更能容忍组件异样、上游 BaaS 异样、FaaS 环境异常，从而能进步 BFF 服务整体稳固健壮性。两层缓存和一种降级策略：
- 缓存 1 ：即代理层缓存。当 FaaS 服务异样时，返回最近胜利的 SSR 缓存。
- 缓存 2 ：即 FaaS 层缓存。实现对不同模块不同页面的公共上游响应数据共用，当上游 BaaS 服务异样时，返回最近胜利的 API 缓存。
- 降级 ：即服务降级为 CSR，当以上没有缓存时回退到响应动态文件。
另外，因为以”两存一降”为基板，也大幅削减了各模块各页面接入 SSR 能力所制作的老本，老本的升高进步了该技术计划利用到各业务场景中的可能性。从周级升高到小时级，随着接入效率的晋升，产能、志愿、信念一直减少。随时可公布 FaaS FC，且只由页面开发同学本人来定，也仅专一页面后果，真正为开发人员提供无服务器的开发体验。
五、计划瞻望
技术计划理论的效用是进步了零碎的上限，它限度工程办法不跌落到无底线的凌乱之中，方案设计既要要管制边界也要预留扩大，晋升开发者”犯错误”的程度。工程化的链条辐射，各种恰到好处的侧面侵入，能够轻松移植进更多模块。率先垂范，布局切入前端工程化新基因，独特拓展渐进式增量降级的能力，带来技术选型上的灵活性。赋能新形态业务模式，同时升高试验缄默老本。
总而言之，Web 利用 SSR 降级已成为一个广泛的景象，也在一直发明新的范式，而且还远未完结。瞻望是建设在欢送新来者和拥抱将来的根底上，这些使得 SSR 计划高度多样化——自在、生机、多边智慧。
举荐浏览：
日志中台不重不丢实现浅谈
百度 ToB 垂类账号权限平台的设计与实际
视觉 Transformer 中的输出可视化办法
深刻了解 WKWebView (渲染篇) —— DOM 树的构建
深刻了解 WKWebView（入门篇）—— WebKit 源码调试与剖析