今年由于疫情原因，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文件?？蛻舳耸盏胶?#xff0c;執行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的原創文章，盡在：“汪子熙”:

總結

以上是生活随笔為你收集整理的SAP UI渲染模式：客户端渲染 VS 服务器端渲染的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。