往年因为疫情起因，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 的原创文章，尽在：” 汪子熙 ”: