SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染

今年由於疫情原因，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的原創文章，盡在："汪子熙":