之前 Jerry 的公眾號文章介紹過 SAP 產品的渲染模式：

• SAP UI渲染模式：客戶端渲染 VS 伺服器端渲染
• 關於 SAP 產品 UI 的搜尋引擎優化 SEO - Search Engine Optimization
• 深入學習SAP UI5框架程式碼系列之二：UI5 控制元件的渲染器

其中提到，SAP UI5 採取的是客戶端渲染，Client Side Render 即 CSR.

那麼，SAP UI5 是否像 SAP Spartacus 那樣，同時支援客戶端渲染和伺服器端渲染呢？

我根據 SAP UI5 SSR 的關鍵字，在搜尋引擎上查找了一番。

1. 要求 SAP UI5 Web Component 支援 SSR 的請求

連結

您的功能請求是否與問題有關？ 請描述。

如果 UI5 Web 元件可以支援使用 Next.js 等流行框架的伺服器端渲染，那就太棒了。 我們在用於 React 包裝器的 UI5 Web 元件中收到了類似的問題。

描述您想要的解決方案

我想在例如使用 UI5 Web 元件 Next.js 無需應用變通方法。 因此，一些圍繞文件的 API 需要一個抽象，以確保它們在 SSR 期間不會崩潰，並且會在客戶端上被 hydrated.

描述您考慮過的替代方案

當您非常仔細地注意匯入元件的位置時，可以使用 Next.js 中已有的 UI5 Web 元件。 匯入 ui5 按鈕，例如在 useEffect 中將使您能夠渲染按鈕。 但是，如果您現在正在匯入一個圖示，它將崩潰，因為圖示匯入正在訪問 SharedElementRegistry，而 SharedElementRegistry 正在訪問 SSR 期間未定義的 document 物件。

2. Support for Static Site Generators

連結

需求：我真的很喜歡 React 的 UI5 WebComponents。 我想將它與靜態站點生成器（如 Next.js 或 Gatsby.js）結合使用，但它不起作用。 我認為目前不支援伺服器端渲染。 如果您可以支援它以提高初始頁面載入的速度，那就太好了。

現狀

嘗試 SSR HTML 自定義元素時存在一些問題。

截至今天，Web 元件不支援 SSR。 我們做了一些實驗，在伺服器端使用渲染器來渲染 Web 元件的初始內容，並在客戶端做一些漸進式增強，但到目前為止它只是一個 POC。 但我有點想知道，為什麼 Web 元件不能與 Next.js 或 Gatsby.js 一起使用——它們可以簡單地呈現自定義 HTML 標籤，然後 Web 元件在客戶端呈現。 但我不得不承認，我並沒有在 Next.js 或 Gatsby.js 的細節中對此進行判斷。

確實網路上現在對 SAP UI5 SEO 和 SSR 的資料很少。