全文字,预计阅读时间8分钟
目录:
一、名词解释
二、业务背景:新增服务市场业务线
三、困境:服务端的渲染由后端主导,前端只负责产出静态(浏览器端执行)js文件
四、重新开始:前端也能做服务端渲染,js也能在服务端生成html
1:引入Node.js做服务渲染层2:确定SSR技术方案node-vue-ssr
五、新的挑战:Node.js和SSR的加入,同构逻辑冗杂
六、合理分层:拆解不同端的复杂度,一次开发多端生效,提高开发效率
七、配置化开发:每一层开发单元如何工作传递给下一层
1:node层:数据抓取和SSR渲染2:前端工程化:客户端和服务端的桥梁3:数据配置层,维护数据一致4:状态处理层:对于获取的数据进行筛选5:页面层:渲染
八、其他:
九、结语:
优势缺点对比:在rd机器静态产出和改造后在Node机器上经过SSR构建的各项指标对比1:加载总时长时长2:其他指标对比未来和展望
一、名词解释:
二、业务背景:新增服务市场业务线
随着百度爱采购的发展,我们致力于打造自己的商业生态,以爱采购为核心,以搜索流量为基础,打造服务市场平台。服务市场致力于服务全网B端商家。搜索流量是我们的基石,我们需要服务端渲染来提高我们的搜索排名,当然服务端渲染也能提高一部分用户体验。
三、困境:服务端的渲染由后端主导,前端只负责产出静态(浏览器端执行)js文件
我们是爱采购前端团队,爱采购的整体技术设计是后端采用php服务,C端以Smarty渲染引擎来进行渲染。前端通过工程化,产出Smarty引擎源文件。导致前后端并未彻底进行前后端分离,前端过于依赖后端渲染,整体的优化和提效过于局限。新的系统期望继承老系统的优势,丢掉它的包袱,在不足之处重新开始。
流程图如下:
四、重新开始:前端也能做服务端渲染,js也能在服务端生成html
经过调研分析,Node.js也能支持服务端渲染,而且性能并不逊色于php的Smarty渲染引擎,在整个部门围绕着提效和跨平台协作的前提下,整个服务市场的技术选用Node.js作为渲染引擎,以增强前端能力实现跨平台和提效。
流程图如下:
1:引入Node.js做服务渲染层
本身,渲染就是前端的工作量,引入Node.js层来做渲染,主要是减少后端