今年由于疫情原因，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源代碼并解析。
兩種渲染方式各有優缺點，及其應用場合。
應用開發人員以所見即所得的方式開發ABAP Webdynpro的視圖，其源代碼存儲于ABAP系統的資料庫表裡。ABAP Webdynpro的視圖同使用者的互動通過Action和Event完成，互動邏輯由ABAP實作，在ABAP伺服器端執行。
、
而這些UI的動态繪制，是通過伺服器端的ABAP程式設計語言，實作在Create按鈕的事件處理函數裡的。點選Create按鈕，運作在伺服器端的ABAP代碼即觸發，動态建立新的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伺服器端進行調試。
Jerry之前的文章 深入學習SAP UI5架構代碼系列之二：UI5 控件的渲染器，對SAP UI5應用的頁面渲染 做過介紹。
基于用戶端渲染的SAP UI5應用，如果要調試其頁面生成邏輯，需要在浏覽器裡調試JavaScript代碼的執行。
正因為基于用戶端渲染的應用，其頁面通過JavaScript在浏覽器的執行而動态生成，是以其内容無法被一般的網絡爬蟲收錄，不利于SEO(Search Engine Optimization，搜尋引擎優化).
Jerry出于好奇，搜尋了OpenUI5的Github倉庫，沒有發現其對伺服器端渲染模式支援的線索。
Accelerator UI采用和SAP BSP類似的JSP技術，伺服器端渲染。
根據SAP官方文檔，Accelerator UI最終會被SAP Spartacus所替代，是以本文不對Accelerator的JSP展開描述。
對Accelerator UI JSP實作細節感興趣的朋友可以參考Jerry之前的文章：
SAP Spartacus Angular UI - 用戶端渲染 & 伺服器端渲染
最後再說到Jerry最近手頭上使用的Angular. 作為一款單頁面應用(SPA，Single Page Application)開發架構，為了彌補用戶端渲染技術在搜尋引擎優化方面表現不佳的缺陷，Angular也同時支援伺服器端渲染模式。
先看Angular正常的用戶端渲染模式。
SAP Spartacus的index.html，幾乎就是一個空的HTML頁面：隻包含一個空的自定義标簽cx-storefront:
伺服器端渲染模式的支援，為網絡爬蟲解析完整的網頁内容，掃清了障礙。
我們使用指令行工具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的這個實際例子，讓大家對伺服器端渲染和用戶端渲染的差異有一個直覺的感受，感謝閱讀。