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

我們團隊昨天收到了一個優先級為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的這個實際例子，讓大家對服務器端渲染和客戶端渲染的差異有一個直觀的感受，感謝閱讀。

Angular HTML JavaScript Scala 渲染

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。

版權聲明：本文內容由網絡用戶投稿，版權歸原作者所有，本站不擁有其著作權，亦不承擔相應法律責任。如果您發現本站中有涉嫌抄襲或描述失實的內容，請聯系我們jiasou666@gmail.com 處理，核實后本網站將在24小時內刪除侵權內容。