最近笔者所在的团队接到了一个优先级为 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 曾经写过一篇文章，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 的这个实际例子，让大家对服务器端渲染和客户端渲染的差异有一个直观的感受，感谢阅读。