指南：揭秘百度直播研发部Web应用SSR技术新方法，在CSR目录下添加一个JS计算函数，可以让页面具备SSR能力。依托端云协同驱动，通过SSR技术关键路径，大规模落地引领优质Web应用市场价值。下面我们就来详细了解一下这个小时级的赋能方案。全文3608字，预计阅读时间10分钟===1.背景从CSR到SSG，网页信息从无到有到完整呈现个性化内容滞后于AJAX请求巩固访问体验提升网页内容量和平台品牌以满足消费者对更高品质体验的需求。同时，内容服务型网站的SEO推广也是关键要素，内容运营助力业务实现突破性增长。回到提升服务竞争力的核心，SSR技术具有独特的潜力和创新机会，各种“非常规”的解决方案也活跃起来，共同的目标是让互联网Web应用变得高质量。另一方面，SSR也是Web服务发展发生质变的分界点。使能成本的降低，除了SSR技术本身的提升外，更依赖于大规模实施。通过系统工程变更，开发者可以便捷升级，服务更贴近用户。2、同构SSR：顶层设计不再接受基于模板的SSR技术，因为异构TPL和JS增加了页面组件的维护和切换成本。基于业务和团队的现状，我们需要快速迭代。代码100%可复用，JS集成同构SSR，最大限度减少组件代码侵入。极速接入：页面开发者希望集成在CSR项目下，模块、项目、页面目录几乎零改动。一方面是因为CSR是主要的业务承载，另一方面是目前多个模块分散在前端，搬进一个中心化的庞大工程再拆解成可控的小块，再加上依赖管理的现状，改造成本极高。为了访问SSR而重构甚至重写会削弱工程的ROI。开发心得：页面开发者更关注组件代码本身，CSR开发部署方式，修改代码打包发布即可。希望BFF的服务编排和云基础设施能够和NoOps一起有序运行。数据接口和字段复用是基本需求。效果保证：使用服务端HTML结果渲染首屏，适当使用缓存策略，加快访问速度，缩短FMP时间，提高web服务质量。SEO友好，有利于内容密集型网页获得搜索曝光。===三、FaaSSSR普适性面对以上挑战，从第一性原理思考，回归同构SSR技术本质》指的是在服务端完成网页的HTML结构拼接，返回内容丰富的文件.在浏览器端，完成水合过程绑定状态和事件，成为完全交互的页面。》无论各个版本如何描述这个过程，服务器端ContentfulHTML的生成都是分解为最基本的组件：组件和数据。在源头：组件是存在的，可以修改构建配置导出和导入;data是CSR过程通过AJAX调用的后端接口的响应数据其实很清楚，只需要在服务端调用Server到Server即可，SSR相比CSR，需要在调用时提前传递数据组件首次执行，基于第一原则构建，我们可以在PaaS的基础上抽取一个一致的FaaSSSR组装环境，具有服务预热、快速接入、弹性伸缩、容器隔离、低运维等优势成本等关键优势在于与Web应用的云开发辅助能力相辅相成前端架构层面的高效协作使得Web应用能够支持原生云联合渲染，打造通用同构方案。SSR核心库更小，更内聚和可维护，松散耦合和自治的模块更具可扩展性，不将每个模块页面限制在特定的技术堆栈，释放组织潜力。因为FaaSSSR环境除了基本的DevOps之外，只对组件和数据进行调度，而保证组件运行在Node服务器上的方法是组件自己导入使用的框架原生API。页面资源：SSR流程所需的必要元素。Template：页面模板，即CSR页面的HTML和SSR页面的模板。Bundle：组件打包的bundle，提供给Node.jsServer端SSR的bundle产品，需要通过webpack单独打包生产。FC：控制SSR进程的计算函数，实现SSR核心的hook，在FunctionSandbox中运行，自定义SSR结果。数据：填写组件的BaaS数据，通过调用后端服务获取。Routing：路由页面请求，调度资源manifest.json：模块构建产生的资源列表。每个方向模块自动产生一个副本，声明上述PageResources的资源等信息。module：模块信息、manifest.json路径、模块查询路径等信息。router：Lambda函数，解析当前Request信息，匹配当前页面的Template、Bundle、FC信息，将HTTP事件派发给FC。BaaS：后端即服务，包括接口、存储、通信等后端服务。通过Spec描述，可以交给FaaSRPC来调用目标服务。渲染：通过一系列的Lambda函数管道调用，注入整个流程的环境变量，包括获取并转换BaaS数据接口描述，通过RPC调用获取内容数据，合并组件和数据，回填APPHTML和模板等关于实际的SSR过程。Watching：与服务的日常运维相关，包括通用监控、日志传输、离线计算、服务观察等。4.1组件响应组件是最小粒度的同构。同构赋予组件一个非常强大、高度可重用、灵活多样的运行环境。实际上，它是客户端、边缘服务和中心服务的集成。我们将组件内容展示和交互逻辑整合为单一职责，使得组件代码至少在客户端和云环境执行两次，在服务器端环境执行一次，并产生内容丰富的网页HTML结构，浏览器端环境再次执行，水合接管了页面的交互响应。组件可以根据不同阶段的全局环境标签做出更垂直细分的渲染响应，控制更个性化的适配逻辑。通过对FaaS沙箱底层的全面打磨，对大部分组成部分进行了验证。访问成本。即使组件没有响应，你也可以实现FC来操作HTML结构，响应请求结果。4.2接口说明组件是页面的骨架，数据是页面的灵魂。FaaSSSRFC中使用JSONScheme语言描述的接口。FaaSRPC中转处理引擎将浏览器的源请求转换为对应的BaaS调用，链接上下游数据通信，具有缩短调用链路、加速结果响应的特点。描述规范包括：URI地址、静态参数、动态参数、请求头、请求方法、权限验证控制、响应捕获机制、存储库等私有协议格式。4.3构建与改造构建阶段的目标是明确模块中不同资源的规则边界，迎合源码资源，通过加载、编译、依赖分析，生产出多层次、多层次的产品，并发布到用于大规模部署的BFF应用程序。同时，可以通过工程自动化复制工艺线。新产品包括：模块列表、页面捆绑、SSR计算功能。4.4开发经验技术方案必须先“本地化”，再“生产化”，才能开发落地场景。只有建立起流畅的本地开发体验，才有可能在线下获取开发者和用户，进行合作共建。基于FaaS-basedSSR，即使页面开发者没有服务端DevOps经验或脚手架，也可以在不耦合服务端框架的情况下，通过构建插件的方式引入FaaSSDK，进一步降低开发时间和成本，并且在本地实时查看SSR结果，让您的网页立即得到优化。4.5风险控制“我们无法完全杜绝组件代码不兼容、下游BaaS黑洞等问题，但可以避免出现问题时直接影响用户访问。”在这种思想的指导下，通过改变BFF的软件架构，开创了“两存一落”的架构设计理念，更加容忍组件异常、下游BaaS异常、FaaS环境异常，从而提高整体的稳定性和健壮性最好的服务。两层缓存和降级策略：缓存1：代理层缓存。当FaaS服务异常时，返回最新成功的SSR缓存。缓存二：FaaS层缓存。实现不同模块、不同页面共享下游公共响应数据，在下游BaaS服务异常时返回最近一次成功的API缓存。Downgrade：即服务降级为CSR，当上面没有缓存时回退到响应静态文件。此外，由于采用“两存一下”作为基板，制造每个模块和页面访问SSR的能力的成本也大大降低，成本的降低增加了这种应用的可能性各种业务场景的技术解决方案。从周级到小时级，随着准入效率的提升，产能、意愿、信心不断增强。FaaSFC随时发布，由页面开发同学自己决定，只关注页面结果，真正为开发者提供serverless开发体验。五、方案展望技术方案的实际作用是提高系统的下限，限制工程方法陷入无底线的混乱。程序设计既要控制边界又要预留扩展，从而提高开发者“犯错”的水平。工程链辐射，各种恰到好处的侧边入侵，可以轻松移植到更多模块中。率先以身作则，布局切入前端工程新基因，共同拓展增量增量升级能力，带来技术选型的灵活性。支持新形式的商业模式，同时降低实验沉默的成本。总而言之，Web应用SSR升级已经成为普遍现象，也在不断创造新的范式，远未结束。该愿景基于欢迎新人和拥抱未来，这使得SSR计划高度多样化——自由、动态、多边智慧。推荐阅读：日志不重不丢的实现浅谈百度ToB垂直账号权限平台的设计与实践深入理解VisualTransformer中的输入可视化方式）——WebKit源码调试与分析
