全文3268字，预计阅读时间8分钟内容：1.术语表2.业务背景：新服务市场业务线3.困境：服务端的渲染由后端主导，而前端只负责生产导出静态（浏览器端执行）js文件4.重新开始：前端也可以做服务端渲染，js也可以在服务端生成html1：介绍Node.js作为服务渲染层2：确定SSR技术方案node-vue-ssr5.新挑战：Node.js和SSR的加入，同构逻辑复杂6.合理分层：拆解不同终端的复杂性，多端一次性开发生效，提高开发效率7.可配置开发：各层开发单元如何工作并传递到下一层1：节点层：数据抓取和SSR渲染2：前端工程:之间的桥梁client和server3：数据配置层，保持数据一致性4：状态处理层：对获取的数据进行筛选5：页面层：渲染8.其他：9.结论：优缺点对比：SSR构建的各种指标对比rd机静态输出改造后Node机上1：总加载时间2：其他指标对比未来展望1.术语解释：2.业务背景：新服务市场业务线随着百度智慧采购的发展，我们致力于打造自己的商业生态，以Aiprocure为核心，以搜索流量为基础，打造服务市场平台。服务市场致力于服务全网B端商户。搜索流量是我们的基石。我们需要服务器端渲染来提高我们的搜索排名。当然服务端渲染也可以提升部分用户体验。3、困境：服务端的渲染由后端主导，前端只负责输出静态（浏览器端执行）的js文件。我们是爱买的前端团队。用于渲染的渲染引擎。前端设计用于生成Smarty引擎源文件。导致前后端没有完全分离，前端过于依赖后端渲染，整体优化和效率提升太有限。新制度希望继承旧制度的优点，丢掉它的包袱，重新来过它的不足。流程图如下：4、重新开始：前端也可以做服务端渲染，js也可以在服务端生成html。经过研究分析，Node.js也可以支持服务端渲染，性能不输PHP的Smarty渲染引擎，在整个部门专注于效率提升和跨平台协同的前提下，整个部门的技术服务市场使用Node.js作为渲染引擎，增强前端能力，实现跨平台和效率提升。流程图如下：1：引入Node.js作为服务渲染层本身。渲染是前端的工作量。节点的介绍。端更专注，前端可以介入服务端，连接服务端和客户端，增强工程能力。2：确定SSR技术方案node-vue-ssr得益于技术的进步，现有的Node.vue-ssr和已有的vue技术栈最终选择了node-vue-ssr。node-vue-ssr的实现过程：详见文档https://ssr.vuejs.org/zh/5.新挑战：Node.js和SSR的加入，同构逻辑复杂1.SSR需要加入状态和CSR状态判断2.在统一数据处理方面，Nuxt.js（vue-ssr的一个框架）会保持nodejs和客户端的数据一致。这种方式缺点很大，效率低：每次开发一个页面，都要写请求逻辑（串行数据和并行数据）和网络异常处理逻辑（网络请求失败，后端异常状态码）。,未登录请求登录数据）扩展性差：难以实现跨平台活动页面的后续扩展（效率太低，代码耦合在一个功能里，lowcode难以升级）中为了解决这些问题，对问题进行了多步拆解、数据采集处理、分层（客户端和服务端代码分离），实现高扩展、高效开发、简单维护、快速锁定问题等6.合理分层：拆解不同终端的复杂性，多个终端同时生效，提高开发效率。7.配置开发：各层开发单元如何工作并传递给下一层1：节点层：数据抓取和SSR渲染节点层获取用户访问路由，根据路由提前获取数据配置层的数据信息，同时获取公共数据（用户信息）并发送给状态处理层。2：前端工程化：客户端和服务端的桥梁，通过工程化解决一套代码开发，运行在多个终端。代码可以在服务端运行生成html节点，代码可以在浏览器运行js交互生成html。3：数据配置层，保持数据一致性根据数据配置层的配置信息，从Node获取相同的数据。数据相同，构建和渲染结果相同。配置信息：exportdefault{//title"title":"ServiceMarket","name":"home",//路由匹配"path":"/",//是否需要构建ssr"ssr":true,//请求参数"ajax":[//并行接口{"path":"/home/info",//串行接口"children":[{"path":"/home/getProductConf","params":{//依赖父接口的参数"name":'parent.data[0].data.name'}}]},//并行接口{"path":"/home/getProductConf"}]}对于项目层的配置，我们加强了配置文件，使项目的所有页面都支持三种灵活的配置：1.对于客户端体验要求高，SEO要求高的，使用SSR搭建2.对于用户体验要求比较一般的,使用数据端预取方式3.对于静态页面，使用客户端js显示。4：状态处理层：对得到的数据进行过滤。一个项目的页面有很多种状态。比如用户中心需要登录，如果没有登录，需要显示。没有登录界面。如果数据采集失败，应显示采集失败界面。在这样的状态下，之前的项目中出现了很多冗余的代码。状态处理层根据页面的配置对数据进行处理，只有成功的数据才会由状态处理层传递给页面层。同时，如果不成功（未登录、获取数据失败等），会显示相应的状态。5：页面层：渲染得益于合理的分层和逻辑拆解，整个页面层只用于交互和页面数据渲染。8、其他：配置灵活：支持三种渲染方式：服务端渲染、数据直出渲染、客户端CSR渲染。容灾方案：服务端渲染出现BUG，可灵活转为客户端渲染。日志收集：收集每一个请求，记录当前cup和内存性能参数，出现问题后及时报警，问题出现IX。结论：优点：前端SSR渲染赋予了我们的项目生命力，更灵活的配置，更好的用户体验，更强大的功能，更好的迭代，更高的安全性和容忍率。缺点：Node.js层的引入导致成本增加对比：静态输出和rd机改造后SSR在Node机上构建的各种指标对比（一）总加载时间图1：渐进式CSR加载总时长为1.7s图2：SSR总加载时间为1.2s，提升了30%（二）其他指标对比图1：渐进式CSR渲染第一次绘制243ms后，第一次内容绘制为943ms,andenddrawingis1243ms图2:SSR渲染的第一次contentdrawingandcontent绘制在427ms,andendofdrawing1027msFP(FirstPaint)FCP(FirstContentfulPaint)第一次绘制LCP（LargestContentfulPaint）内容绘制最大内容渲染DCL（DomContentloaded）：未来分析与展望：通过性能对比，整体收益远远超过眼前的东西，在future，我们期待继续实现以爱心采购为中心的商业生态的配置，用数据描述每个页面，使用Node.活动页面定制。推荐阅读：百度APP视频播放解码优化百度爱饭饭实时CDP构建实践当技术重构遇上DDD，如何实现业务与技术的双赢？接口文档自动更改？百度程序员开发效率MAX技术秘诀！百度搜索平台低代码探索与实践------百度极客说百度官方技术公众号上线！技术干货·行业资讯·在线沙龙·行业大会招聘信息·介绍资料·技术书籍·百度外设
