這是 Jerry 2021 年的第 52 篇文章，也是汪子熙公衆号總共第 329 篇原創文章。
本文的主題也源自 Jerry 團隊最近處理的一個客戶 incident, 并且與 Jerry 之前的文章 SAP UI渲染模式：用戶端渲染 VS 伺服器端渲染 介紹的内容密切相關。
讓我們簡單回顧一下前文介紹的用戶端渲染(Client Side Render，簡稱 CSR)和伺服器端渲染(Server Side Render，簡稱 SSR)的差別。
用戶端渲染
如下圖所示，使用者通過浏覽器向網站發送請求，伺服器或者 CDN 為使用者提供靜态 HTML、CSS 和 JavaScript 檔案。浏覽器下載下傳 HTML 和 JavaScript 檔案，并執行 JavaScript(通常是 Angular，React，Vue，SAP UI5 等前端架構的庫檔案)，完成頁面渲染。絕大多數情況下，浏覽器會通過 AJAX 向背景伺服器送出請求以擷取動态内容。從伺服器端得到 API 響應後，在用戶端浏覽器中解析響應内容，以呈現最終頁面。
用戶端渲染，因為通過 HTML 頁面源代碼渲染最終頁面，及根據 API 響應動态改變頁面内容的行為，均發生在用戶端，因而得名。
采用 CSR 技術的 SAP 産品 UI，包括一切使用 SAP UI5 架構開發的産品，比如 SAP Cloud for Customer，以及基于 SAP Fiori Elements 的 SAP S/4HANA 頁面。
伺服器端渲染
與 CSR 相比，在伺服器端渲染機制中，從 HTML 源代碼到最終呈現給使用者的頁面的轉換過程，均在伺服器端運作環境中執行。
例如，假設一個 Angular 應用開啟了伺服器端渲染模式，使用 express 庫運作在一個 Node.js 伺服器上，則該應用的 index.html 頁面，通過 nguniversal/express-engine 引擎，進行渲染的入口位置如下：
伺服器端渲染結束後，将最終呈現給客戶的 HTML 源代碼字元串，通過回調函數發送給浏覽器，即下圖第 1006 行的回調函數 done.
下圖第 1008 行 done 回調函數中展示的變量 str，存儲的是 SAP Commerce Cloud UI 開啟伺服器端渲染後，由伺服器渲染完畢的 index.html 的完整 HTML 源代碼，超過 240KB；而在用戶端渲染模式下，伺服器傳回給浏覽器的 index.html 内容, 大小還不到 1KB.
采用 SSR 技術的 SAP 産品 UI，包括所有基于 SAP ABAP Webdynpro，WebClient UI 技術的産品，比如 SAP SRM，SAP CRM，SAP S/4HANA 裡的 Service 子產品的 UI，SAP Commerce Cloud 基于 JSP 技術的 Accelerator UI 等等。
基于 SAP Spartacus 開源項目的新一代 SAP Commerce Cloud UI，同時支援用戶端渲染和伺服器端渲染兩種方式。
回歸本文正題。
用戶端渲染模式下，Web 應用對搜尋引擎優化的支援較弱。以 SAP Commerce Cloud UI 為例，當使用用戶端渲染時，搜尋引擎的網絡爬蟲，抓取的 index.html 頁面空空如也：app-root 标簽内，沒有任何内容，因為該内容直至浏覽器收到 index.html 之後，才會執行 Angular 架構代碼，生成最終的 HTML 源代碼。
而開啟伺服器端渲染模式後，伺服器端完成頁面渲染，此時伺服器傳回浏覽器的 app-root 标簽内，已經包含了渲染完畢的最終頁面。大家可以将下圖伺服器端渲染模式開啟後，請求 SAP Commerce Cloud UI 首頁時，從伺服器端收到的 index.html 裡 app-root 标簽内的資料，同上圖用戶端渲染模式下的資料進行對比。
伺服器端渲染解決了網絡爬蟲無法正确抓取 Web 應用頁面内容的問題, 然而把頁面渲染，資料請求和響應處理移至伺服器端，勢必會占用伺服器端寶貴的記憶體資源和增加其處理負擔。
為此，在 SAP Commerce Cloud UI 伺服器端渲染模式下，我們團隊也設計了一些優化邏輯，比如引入渲染緩存，增加渲染隊列和逾時機制，以及在一定條件下降級到用戶端渲染等措施，以此在保證伺服器正常的服務能力和支援搜尋引擎優化之間，獲得較好的折衷。
https://sap.github.io/spartacus-docs/server-side-rendering-optimization/ 支援伺服器端渲染，隻是完成搜尋引擎優化的第一步。基于 SAP UI5 架構開發的 SAP 應用，絕大多數都不是 2C 應用，是以不依賴于搜尋引擎優化，亦即這些應用不大可能會出現在使用者的搜尋引擎結果清單中。
另一方面，比如客戶使用 SAP Commerce Cloud 搭建自己的電商店鋪，則店鋪對于搜尋引擎優化的完善程度，和店鋪的銷售額有直接的關系。
網站的搜尋引擎優化是一門學問，本文 Jerry 隻介紹最近處理客戶 incident 了解到的相關知識。
我們在 Google 裡根據關鍵字 lego ae 進行搜尋，搜尋結果的第二條記錄，赫然就是樂高在阿聯酋地區(國家代碼為 AE)的電商店鋪網站，這是一個基于 SAP Spartacus 開發的 SAP Commerce Cloud UI 頁面：
上圖灰色區域的頁面标題，和黃色區域的頁面描述資訊，分别來自 SAP Commerce Cloud UI 網頁源代碼中的 title 标簽和 meta description 标簽的值。
再比如根據關鍵字 lego ae LEGO Dinosaur Fossils，搜尋樂高一款恐龍化石的産品：
搜尋出來的結果清單裡，出現了一種 SAP Commerce Cloud UI PDP 頁面 - Product Detail Page，即産品明細頁面：
以上例子中無論是頁面 title 标簽，還是 meta description 标簽的值，均為背景驅動，即來自 SAP Commerce Cloud 背景系統。
我們團隊在 SAP Commerce Cloud UI 實作中，設計了 Page 模型，其 title 字段和 description 字段，分别維護需要渲染在 HTML 源代碼 title 和 meta description 标簽頁的值。
我們稱上圖的模型為 SAP Commerce Cloud UI 頁面的中繼資料：Page Meta.
在運作時，這些頁面中繼資料通過 PageMetaService 類的 meta$ 成員維護，其指派邏輯如下：
(1) 調用 CMSService 的 getCurrentPage 方法，從 Commerce 背景讀取頁面中繼資料；
(2) 根據 Commerce Cloud 前端配置，讀取目前類型的頁面需要完成的中繼資料解析類型，得到負責執行對應操作的解析器(Resolvers)；
(3) 調用對應的解析器，完成解析工作。
解析完畢的頁面中繼資料，存儲在 PageMetaService 的成員變量 meta$ 内，後者最終被 SeoMetaService 所訂閱，将其值取出，注入到頁面 DOM 元素中。這就是 SAP Commerce Cloud UI 針對搜尋引擎優化中基于 meta 标簽的實作過程。
而在 SAP S/4HANA 這種 Backoffice 人員使用居多的應用裡，頁面裡雖然也存在 meta 标簽，但和 SAP Commerce Cloud UI 使用 meta description 标簽支援搜尋引擎優化不同，S/4HANA UI 頁面裡的 meta 标簽，更多展現的是其維護頁面中繼資料的原本用途，這些中繼資料被 SAP UI5 架構代碼和對應的背景代碼解析，對客戶來說是完全透明的。
比如下圖名稱為 sap-client 的 meta 标簽，維護的 content 内容為 715，意思是該 Fiori Launchpad 背景對應的 ABAP Client ID 為 715.
最後，大家在搜尋引擎裡使用 inurl 文法進行搜尋，就能找到一些利用 SAP WebClient UI 技術，進行伺服器端渲染，能夠被搜尋引擎檢索到的網站。感興趣的朋友可以自行嘗試。
希望本文能夠讓大家對于 SAP 産品 UI 支援搜尋引擎優化上做出的努力有一些基本了解，感謝閱讀。
更多閱讀
從産品展示頁面談談Hybris的特有概念和設計結構
從産品展示頁面談談Hybris系列之二: DTO, Converter和Populator
Hybris Enterprise Commerce Platform 服務層的設計與實作
從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發
SAP Commerce Cloud (電商雲) UI 的懶加載功能
SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何通過調整CSS來改變UI顯示風格
SAP 産品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商雲) UI 增強實作中的展現
Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版
一小時内在本地搭建SAP Commerce Cloud(電商雲)的前背景運作環境
SAP Commerce Cloud ( 電商雲 ) 路由路徑的自定義配置與開發
響應式程式設計在 SAP 标準産品 UI 開發中的一個實踐
SAP UI的加載動畫效果和幽靈設計(Ghost Design)
SAP UI渲染模式：用戶端渲染 VS 伺服器端渲染