這是 Jerry 2021 年的第 52 篇文章，也是汪子熙公眾號總共第 329 篇原創文章。

本文的主題也源自 Jerry 團隊最近處理的一個客戶 incident, 並且與 Jerry 之前的文章 [**SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染**](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect) 介紹的內容密切相關。

讓我們簡單回顧一下前文介紹的客戶端渲染(Client Side Render，簡稱 CSR)和伺服器端渲染(Server Side Render，簡稱 SSR)的區別。

# 客戶端渲染

如下圖所示，使用者通過瀏覽器向網站傳送請求，伺服器或者 CDN 為使用者提供靜態 HTML、CSS 和 JavaScript 檔案。瀏覽器下載 HTML 和 JavaScript 檔案，並執行 JavaScript(通常是 Angular，React，Vue，SAP UI5 等前端框架的庫檔案)，完成頁面渲染。絕大多數情況下，瀏覽器會通過 AJAX 向後臺伺服器發出請求以獲取動態內容。從伺服器端得到 API 響應後，在客戶端瀏覽器中解析響應內容，以呈現最終頁面。

![](https://img-blog.csdnimg.cn/img_convert/d4ff1976482e0391a17f40bbb67b3367.png)

客戶端渲染，因為通過 HTML 頁面原始碼渲染最終頁面，及根據 API 響應動態改變頁面內容的行為，均發生在客戶端，因而得名。

採用 CSR 技術的 SAP 產品 UI，包括一切使用 SAP UI5 框架開發的產品，比如 SAP Cloud for Customer，以及基於 SAP Fiori Elements 的 SAP S/4HANA 頁面。

# 伺服器端渲染

與 CSR 相比，在伺服器端渲染機制中，從 HTML 原始碼到最終呈現給使用者的頁面的轉換過程，均在伺服器端執行環境中執行。

![](https://img-blog.csdnimg.cn/img_convert/38df718b50b472d59eedabce26ed8632.png)

例如，假設一個 Angular 應用開啟了伺服器端渲染模式，使用 express 庫執行在一個 Node.js 伺服器上，則該應用的 index.html 頁面，通過 nguniversal/express-engine 引擎，進行渲染的入口位置如下：

![](https://img-blog.csdnimg.cn/img_convert/3f4a81b8dc989c786e4ffc0dd09422a5.png)

伺服器端渲染結束後，將最終呈現給客戶的 HTML 原始碼字串，通過回撥函式傳送給瀏覽器，即下圖第 1006 行的回撥函式 done.

下圖第 1008 行 done 回撥函式中展示的變數 str，儲存的是 SAP Commerce Cloud UI 開啟伺服器端渲染後，由伺服器渲染完畢的 index.html 的完整 HTML 原始碼，超過 240KB；而在客戶端渲染模式下，伺服器返回給瀏覽器的 index.html 內容, 大小還不到 1KB.

![](https://img-blog.csdnimg.cn/img_convert/34295e9f97d9691d1573fa173f65ee74.png)

採用 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 原始碼。

![](https://img-blog.csdnimg.cn/img_convert/5883ed671269e422e1ae0655e9e8c63a.png)

而開啟伺服器端渲染模式後，伺服器端完成頁面渲染，此時伺服器返回瀏覽器的 app-root 標籤內，已經包含了渲染完畢的最終頁面。大家可以將下圖伺服器端渲染模式開啟後，請求 SAP Commerce Cloud UI 首頁時，從伺服器端收到的 index.html 裡 app-root 標籤內的資料，同上圖客戶端渲染模式下的資料進行對比。

![](https://img-blog.csdnimg.cn/img_convert/a61d10869a9eb8f3bd179d8100082d7d.png)

伺服器端渲染解決了網路爬蟲無法正確抓取 Web 應用頁面內容的問題, 然而把頁面渲染，資料請求和響應處理移至伺服器端，勢必會佔用伺服器端寶貴的記憶體資源和增加其處理負擔。

為此，在 SAP Commerce Cloud UI 伺服器端渲染模式下，我們團隊也設計了一些優化邏輯，比如引入渲染快取，增加渲染佇列和超時機制，以及在一定條件下降級到客戶端渲染等措施，以此在保證伺服器正常的服務能力和支援搜尋引擎優化之間，獲得較好的折衷。

https://sap.github.io/spartacus-docs/server-side-rendering-optimization/

![](https://img-blog.csdnimg.cn/img_convert/25847e52dec5a6d506a2348a671fa3c3.png)

支援伺服器端渲染，只是完成搜尋引擎優化的第一步。基於 SAP UI5 框架開發的 SAP 應用，絕大多數都不是 2C 應用，因此不依賴於搜尋引擎優化，亦即這些應用不大可能會出現在使用者的搜尋引擎結果列表中。

另一方面，比如客戶使用 SAP Commerce Cloud 搭建自己的電商店鋪，則店鋪對於搜尋引擎優化的完善程度，和店鋪的銷售額有直接的關係。

網站的搜尋引擎優化是一門學問，本文 Jerry 只介紹最近處理客戶 incident 瞭解到的相關知識。

我們在 Google 里根據關鍵字 lego ae 進行搜尋，搜尋結果的第二條記錄，赫然就是樂高在阿聯酋地區(國家程式碼為 AE)的電商店鋪網站，這是一個基於 SAP Spartacus 開發的 SAP Commerce Cloud UI 頁面：

![](https://img-blog.csdnimg.cn/img_convert/8e57075b3b616e4e8cbd0ee81c757250.png)

上圖灰色區域的頁面標題，和黃色區域的頁面描述資訊，分別來自 SAP Commerce Cloud UI 網頁原始碼中的 title 標籤和 meta description 標籤的值。

![](https://img-blog.csdnimg.cn/img_convert/2e0c2d7fdd5917c351f7c4bc96f6baa4.png)

![](https://img-blog.csdnimg.cn/img_convert/b3e7d9d84573dfe050516ff7f9e9827d.png)

再比如根據關鍵字 lego ae LEGO Dinosaur Fossils，搜尋樂高一款恐龍化石的產品：

![](https://img-blog.csdnimg.cn/img_convert/82f22d82eae0ee57d5bbf9789496d963.png)

搜尋出來的結果列表裡，出現了一種 SAP Commerce Cloud UI PDP 頁面 - Product Detail Page，即產品明細頁面：

![](https://img-blog.csdnimg.cn/img_convert/460db3d7a9d3820b90315e1ae5abacf7.png)

以上例子中無論是頁面 title 標籤，還是 meta description 標籤的值，均為後臺驅動，即來自 SAP Commerce Cloud 後臺系統。

我們團隊在 SAP Commerce Cloud UI 實現中，設計了 Page 模型，其 title 欄位和 description 欄位，分別維護需要渲染在 HTML 原始碼 title 和 meta description 標籤頁的值。

![](https://img-blog.csdnimg.cn/img_convert/b2fd3bba2b044b698987077267903569.png)

我們稱上圖的模型為 SAP Commerce Cloud UI 頁面的後設資料：Page Meta.

在執行時，這些頁面後設資料通過 PageMetaService 類的 meta$ 成員維護，其賦值邏輯如下：

(1) 呼叫 CMSService 的 getCurrentPage 方法，從 Commerce 後臺讀取頁面後設資料；

(2) 根據 Commerce Cloud 前端配置，讀取當前型別的頁面需要完成的後設資料解析型別，得到負責執行對應操作的解析器(Resolvers)；

(3) 呼叫對應的解析器，完成解析工作。

![](https://img-blog.csdnimg.cn/img_convert/6c8efe077802e58fdf490bc3e63a635b.png)

解析完畢的頁面後設資料，儲存在 PageMetaService 的成員變數 meta$ 內，後者最終被 SeoMetaService 所訂閱，將其值取出，注入到頁面 DOM 元素中。這就是 SAP Commerce Cloud UI 針對搜尋引擎優化中基於 meta 標籤的實現過程。

![](https://img-blog.csdnimg.cn/img_convert/63c5a976c9c548bfc06868c944e670bd.png)

而在 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.

![](https://img-blog.csdnimg.cn/img_convert/e8c6e1413c8f508cebdc63f2ed3a1ce5.png)

最後，大家在搜尋引擎裡使用 inurl 語法進行搜尋，就能找到一些利用 SAP WebClient UI 技術，進行伺服器端渲染，能夠被搜尋引擎檢索到的網站。感興趣的朋友可以自行嘗試。

![](https://img-blog.csdnimg.cn/img_convert/94fad53abf9fdafac1d9ca92ee8846b3.png)

希望本文能夠讓大家對於 SAP 產品 UI 支援搜尋引擎優化上做出的努力有一些基本瞭解，感謝閱讀。

**更多閱讀**

*   [從產品展示頁面談談Hybris的特有概念和設計結構](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247483969&idx=1&sn=06adb0a08f9a8e1177842a736bbb1efe&chksm=ead5b0d6dda239c0972f2cbceefe9884c75be07d03f087f0706463b16cc532823802d7891b6c&scene=21#wechat_redirect)

*   [從產品展示頁面談談Hybris系列之二: DTO, Converter和Populator](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247484094&idx=1&sn=eb80fa4ac5c19066c343f7e9dbf850fb&chksm=ead5b029dda2393f58a1e46eb219db1dd724d654bdb89976ca16af0c42d59d2f55b21c10be38&scene=21#wechat_redirect)

*   [Hybris Enterprise Commerce Platform 服務層的設計與實現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247485067&idx=1&sn=aba6d36b14f03274e7a714e7d8413b90&chksm=ead5b41cdda23d0a07cf3a76dc6c6fe99dd7ba795d04ce7d358664ddffe3e0a96d8a6b8e034c&scene=21#wechat_redirect)

*   [從一個實際的例子出發，談談SAP Commerce Cloud電商雲的UI自定義開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491695&idx=1&sn=6affe95459e8d5f1e998fdc426b8d759&chksm=ead652f8dda1dbee864b66a033bc6a39877fbd9f83225ee057624c5f47c8516f4782757f94a2&scene=21#wechat_redirect)

*   [SAP Commerce Cloud (電商雲) UI 的懶載入功能](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491712&idx=1&sn=4605662c08eb81ee5f3bcaf8a10a9464&chksm=ead65217dda1db01397065181b534b66270eab3336894adda387f91a7ec69f37f5d8c35c099c&scene=21#wechat_redirect)

*   [SAP CRM Fiori 應用和 SAP Commerce Cloud (電商雲) UI 如何通過調整CSS來改變UI顯示風格](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491736&idx=1&sn=f65bbda4e8b2226ab3c9d4fc4d8a5919&chksm=ead6520fdda1db19c7d3d1b4d50005eedc7da7df4e99b4784ea287dadd03c16278e9e3d8baf3&scene=21#wechat_redirect)

*   [SAP 產品一脈相承的 UI 增強思路，在 SAP Commerce Cloud (電商雲) UI 增強實現中的體現](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491759&idx=1&sn=3243302470e47a3e472960c0e78d9c1e&chksm=ead65238dda1db2e7dc008ee5f1db0710b815dcac3d8787fb6f00337422a3fd06310cecf547a&scene=21#wechat_redirect)

*   [Jerry在2020 SAP全球技術大會的分享：SAP Spartacus技術介紹的文字版](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247490911&idx=1&sn=ab86c37e6ceb32b5037bce86bf7ea69f&chksm=ead5afc8dda226deb2e9bba385fed2397ddc7f746360200bf21d4f22bf57dd84b444dcd9663e&scene=21#wechat_redirect)

*   [一小時內在本地搭建SAP Commerce Cloud(電商雲)的前後臺執行環境](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491814&idx=1&sn=4eae20513c64ae3d02db0e0cea0101ef&chksm=ead65271dda1db678b6d54485603ba0cce263bf751c346b47310fac29741d77c2ab834e69887&scene=21#wechat_redirect)

*   [SAP Commerce Cloud ( 電商雲 ) 路由路徑的自定義配置與開發](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491908&idx=1&sn=391f3069597e21d342ce86fdbbef8d0c&chksm=ead653d3dda1dac520f13876de26994fa33ad1f55d616d67b86914bc559427190387770d69d5&scene=21#wechat_redirect)

*   [響應式程式設計在 SAP 標準產品 UI 開發中的一個實踐](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247492627&idx=1&sn=2f879542eefcd13cca66d6f0dabf2964&chksm=ead65684dda1df923bb11f5da42616a1693f2d8eb7e0218a5a4d3f1a4b59eb957dc105d42938&scene=21#wechat_redirect)

*   [SAP UI的載入動畫效果和幽靈設計(Ghost Design)](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491512&idx=1&sn=a44d166f7685b7a23aabaa22bc46c3a7&chksm=ead5ad2fdda22439755b9434a7364afd97356e1a7a623beb94f5375dc2ec47559d9efa60985f&scene=21#wechat_redirect)

*   [SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染](http://mp.weixin.qq.com/s?__biz=MzI3MDE4MjM5Mg==&mid=2247491417&idx=1&sn=db841236e406d2bb3aeb9677596927e9&chksm=ead5adcedda224d8e4d0161bfda0e3da0d0cbf6d87cee20978767cbe6fdbb6e56caf177e18a8&scene=21#wechat_redirect)

關於 SAP 產品 UI 的搜尋引擎優化 SEO - Search Engine Optimization

相關文章