Storefront 的屏幕布局由可配置的斷點(diǎn)(configurable breakpoints)驅(qū)動(dòng)。斷點(diǎn)具有可配置的屏幕尺寸（即 < 576px），并且關(guān)聯(lián)的屏幕名稱可用于進(jìn)一步定義布局。

一個(gè)很好的例子是頁(yè)面模板槽配置，它可以根據(jù)屏幕名稱進(jìn)行調(diào)整，以便布局因屏幕尺寸而異（即移動(dòng)與桌面）。

然而，其他功能也可以使用屏幕名稱來(lái)進(jìn)一步增強(qiáng)功能的呈現(xiàn)。一個(gè)很好的例子是表格組件，它有一個(gè)基于屏幕的可配置標(biāo)題列表。

屏幕特定 DOM 的創(chuàng)建就是我們所說(shuō)的自適應(yīng)設(shè)計(jì)(adaptive design)。此設(shè)計(jì)針對(duì)小屏幕進(jìn)行了優(yōu)化，但也針對(duì)可訪問(wèn)性進(jìn)行了優(yōu)化。

這種技術(shù)的問(wèn)題在于它是由窗口寬度驅(qū)動(dòng)的。斷點(diǎn)配置與實(shí)際窗口寬度進(jìn)行比較，并且會(huì)在實(shí)際窗口發(fā)生變化時(shí)發(fā)生變化。

然而，在 SSR 上，我們沒(méi)有窗口。我們無(wú)法通過(guò)比較窗口大小來(lái)找到屏幕。這就是我們目前在 SSR 上使用移動(dòng)優(yōu)先(mobile-first )方法的原因。然而，這會(huì)導(dǎo)致問(wèn)題，因?yàn)?#xff1a;

• 生成的布局可能無(wú)法反映實(shí)際的窗口大小
• 生成的內(nèi)容可能不足以供爬蟲(chóng)使用

為了解決這個(gè)問(wèn)題，我們需要考慮幾個(gè)方面：

我們可以在組合中引入設(shè)備檢測(cè)。我們只會(huì)在 SSR 中執(zhí)行此操作，并且需要將檢測(cè)到的設(shè)備類型映射到我們?cè)跀帱c(diǎn)配置中定義的屏幕.

一旦我們根據(jù)設(shè)備類型在 SSR 中呈現(xiàn)多個(gè)版本，我們應(yīng)該在 SSR 之上的任何緩存層（主要是 Web 服務(wù)器緩存和 CDN）中考慮到這一點(diǎn)。

我們可以通過(guò)將設(shè)備類型公開(kāi)為標(biāo)頭來(lái)做到這一點(diǎn)。

目前尚不清楚我們需要為設(shè)備公開(kāi)什么級(jí)別的粒度。想到以下幾點(diǎn)：

• mobile
• desktop
• table
• 機(jī)器人/爬蟲(chóng)

總結(jié)

以上是生活随笔為你收集整理的关于 SAP Spartacus 服务器端渲染 SSR 无法使用窗口宽度以进行自适应设计的问题的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。