往年因为疫情起因，SAP一年一度的DKOM(Developer Kick-Off Meeting)切换成了线上模式，刚刚于昨天圆满闭幕。
工夫过得真快，去年的DKOM好像还历历在目：SAP成都研究院数字翻新空间小伙伴们在2020 SAP上海DKOM.
然而Jerry昨天没有太多工夫去在线观看，只因为...... 咱们团队昨天收到了一个优先级为VERY HIGH的客户incident：
这个incident是客户在应用SAP Spartacus并试图启用其服务器端渲染模式(Server Side Rendering，简称SSR)时，遇到了问题，因而我有机会回顾之前应用过的SAP UI开发技术里，对于客户端渲染(Client Side Rendering，简称CSR)和服务器端渲染的知识点。
回顾目录
- SAP ABAP Webdynpro - 服务器端渲染
- SAP BSP / WebClient UI - 服务器端渲染
- SAP UI5 - 客户端渲染
- SAP Commerce Cloud Accelerator UI - 服务器端渲染
- Jerry手头正在解决的incident - SAP * Spartacus Angular UI - 客户端渲染 & 服务器端渲染
Jerry 2018年已经写过一篇文章，SAP UI和Salesforce UI开发漫谈 ，对我已经工作过的SAP产品里，所应用过的UI开发技术做了泛泛的介绍。
而本文，则是对这些UI技术采纳的页面渲染形式做一个简略的总结。
客户端渲染 VS 服务器端渲染
这组概念的比拟，在网上有泛滥文章介绍。
客户端渲染，即客户端发动HTML网页申请时，服务器不做任何解决，间接返回动态的HTML文件。客户端收到后，执行JavaScript，生成DOM，插入HTML页面，实现最终页面的绘制。
客户端渲染模式里，视图源代码生成，页面路由，以及利用的业务逻辑，全副放在客户端实现和运行执。服务器只负责HTML页面的长久化存储，因而客户端渲染利用又称为胖客户端利用(Rich Client Application).
而服务器端渲染模式里，视图源代码生成，页面路由，以及利用的业务逻辑均在服务器端实现，客户端只负责接管到服务器端渲染好的HTML源代码并解析。
两种渲染形式各有优缺点，及其利用场合。
SAP ABAP Webdynpro - 服务器端渲染
利用开发人员以所见即所得的形式开发ABAP Webdynpro的视图，其源代码存储于ABAP零碎的数据库表里。ABAP Webdynpro的视图同用户的交互通过Action和Event实现，交互逻辑由ABAP实现，在ABAP服务器端执行。
比方我开发了一个ABAP Webdynpro UI，在Input字段里输出一个数字：
点击Create按钮之后，可能动静生成对应数量的Label和Text View控件：
而这些UI的动静绘制，是通过服务器端的ABAP编程语言，实现在Create按钮的事件处理函数里的。点击Create按钮，运行在服务器端的ABAP代码即触发，动态创建新的UI控件实例。
SAP BSP / WebClient UI - 服务器端渲染
SAP BSP的名称Business Server Page曾经通知咱们，这也是一种服务器端渲染技术。SAP WebClient UI基于SAP BSP，封装了很多开发人员能够间接重用的标签，进步了UI开发效率。
举个例子，下图是一个典型的应用SAP WebClient UI实现的搜寻页面(searchFrame)，第2行和第3行申明了SAP规范元素库thtmlb和chtmlb的援用，而后在第11行应用了thtmlb库里的标签searchFrame。
短短29行代码，就绘制出了如下图的搜寻界面：不仅反对通过下拉菜单更换搜寻条件，也反对通过带有 + 和 - 的圆形按钮增加或者删除搜寻条件。
如此一来，应用程序开发人员无需再去编写原生的HTML代码和CSS，只需重用searchFrame标签，在运行期间，标签对应的Render类会负责生成原生的HTML代码。在下列高亮ABAP类的办法里设置断点，就能调试searchFrame界面源代码在服务器端渲染的明细。
在Jerry这两篇文章里，对SAP WebClient UI技术的工作原理有具体的介绍：
- SAP UI和Salesforce UI开发漫谈
- SAP UI 搜寻分页技术
总结：SAP ABAP Webdynpro，SAP BSP和SAP WebClient UI，页面源代码的渲染产生在ABAP服务器端。如果须要调试这些页面的源代码生成逻辑，须要找到对应的ABAP类，在ABAP服务器端进行调试。
SAP UI5 - 客户端渲染
Jerry之前的文章 深刻学习SAP UI5框架代码系列之二：UI5 控件的渲染器，对SAP UI5利用的页面渲染 做过介绍。
基于客户端渲染的SAP UI5利用，如果要调试其页面生成逻辑，须要在浏览器里调试JavaScript代码的执行。
正因为基于客户端渲染的利用，其页面通过JavaScript在浏览器的执行而动静生成，因而其内容无奈被个别的网络爬虫收录，不利于SEO(Search Engine Optimization，搜索引擎优化).
Jerry出于好奇，搜寻了OpenUI5的Github仓库，没有发现其对服务器端渲染模式反对的线索。
SAP Commerce Cloud Accelerator UI - 服务器端渲染
Accelerator UI采纳和SAP BSP相似的JSP技术，服务器端渲染。
依据SAP官网文档，Accelerator UI最终会被SAP Spartacus所代替，所以本文不对Accelerator的JSP开展形容。
对Accelerator UI JSP实现细节感兴趣的敌人能够参考Jerry之前的文章：
SAP UI和Salesforce UI开发漫谈
SAP Spartacus Angular UI - 客户端渲染 & 服务器端渲染
最初再说到Jerry最近手头上应用的Angular. 作为一款单页面利用(SPA，Single Page Application)开发框架，为了补救客户端渲染技术在搜索引擎优化方面体现不佳的缺点，Angular也同时反对服务器端渲染模式。
先看Angular惯例的客户端渲染模式。
SAP Spartacus的index.html，简直就是一个空的HTML页面：只蕴含一个空的自定义标签cx-storefront:
在客户端渲染模式下，服务器返回给浏览器的第一个申请，蕴含的正是这个简直空白的index.html页面：
这个index.html页面尺寸只有4kB，耗时309毫秒：
其后，咱们团队用TypeScript开发，而后编译成的JavaScript代码，在浏览器里执行，渲染出最终的HTML页面：
再看Spartacus的服务器端渲染的体现：服务器收到浏览器的页面申请后，在服务器端即时渲染页面，并将后果返回：
在服务器端渲染模式下，第一个HTTP申请的响应数据里，蕴含了Spartacus home页面的残缺HTML源代码：
服务器端渲染模式的反对，为网络爬虫解析残缺的网页内容，扫清了阻碍。
咱们应用命令行工具curl，模仿网络爬虫读取SAP Spartacus首页内容，在服务器端和客户端渲染模式下，读取到的内容大小比拟如下图所示：
当然，Angular对服务器端渲染的反对，绝不是开箱即用的。除了引入@angular/platform-server和@nguniversal/express-engine之外，还须要对现有的基于客户端渲染的利用做一些加强。
此外，如之前Jerry 文章 Jerry在2020 SAP寰球技术大会的分享：SAP Spartacus技术介绍的文字版 提及的，SAP Spartacus是以库文件的形式公布给SAP合作伙伴应用的。二次开发人员应用Spartacus库文件，开发出合乎本人理论业务须要的Storefront利用，而二次开发过程中，合作伙伴本人编写的前端代码，实践上也可能会影响Angular利用服务器端渲染性能的开启，比方Jerry和共事这次解决的这个优先级为VERY HIGH的客户incident(具体起因还在剖析中).
心愿通过本文举出的SAP Spartacus的这个理论例子，让大家对服务器端渲染和客户端渲染的差别有一个直观的感触，感激浏览。
更多浏览
- SAP UI和Salesforce UI开发漫谈
- SAP UI 搜寻分页技术
- Jerry在2020 SAP寰球技术大会的分享：SAP Spartacus技术介绍的文字版
- SAP UI5利用开发人员理解UI5框架代码的意义
- SAP UI5 module懒加载机制
- SAP UI5 控件渲染机制
- HTML原生事件 VS SAP UI5 Semantic事件
- SAP UI5控件元数据的元数据实现
- SAP UI5控件的实例数据批改和读取逻辑
- SAP UI5控件数据绑定的实现原理
- SAP UI5控件数据绑定的三种模式：One Way, Two Way和OneTime实现原理比拟
- SAP UI5控件ID的生成逻辑
- SAP UI5控件的多语言(国际化,Internationalization,i18n)反对的实现原理
- XML视图里的button控件
- button控件和它背地的DOM元素
- SAP UI5 OData流言粉碎机：极短时间内发送两个Odata request,前一个会主动被cancel掉吗
- 漫谈SAP产品里页面上的Checkbox设计与实现系列之一
更多Jerry的原创文章，尽在："汪子熙":