和SPA伺服器端呈現

單頁應用程式(SPA)可以為用戶提供豐富的動態體驗，以熟悉的方式反應和行為，通常就像本機應用程式。 這是通過依靠客戶端將內容預先載入，然後完成處理用戶交互的繁重工作來實現的 從而最大限度地減少客戶端與伺服器之間需要的通信量，使應用更加被動。

但是，這可能導致較長的初始載入時間，尤其是當SPA載荷較大且內容豐富時。 為了優化載入時間，可以在伺服器端呈現一些內容。 使用伺服器端渲染(SSR)可以加快頁面的初始載入，然後將進一步的渲染傳遞給客戶端。

何時使用SSR

並非所有項目都需要SSR。 雖然AEM完全支援聯署材料安全SPA和保障法，但Adobe並不建議對每個項目系統地實施。

在決定實施SSR時，您必須首先估計SSR的額外複雜性、工作量和成本增加實際上代表項目的哪些額外內容，包括長期維護。 只有當增加值明顯超過估計成本時，才應選擇SSR結構。

SSR通常在以下任一問題出現明確的「是」時提供一些值：

  • 徐： 是否仍然需要SSR才能讓帶來流量的搜索引擎正確索引站點？ 請記住，主搜索引擎爬網程式現在會評估JS。
  • 頁面速度： SSR是否在真實環境中提供了可衡量的速度改進，並增加了總體用戶體驗？

只有在以下兩個問題中至少有一個以明確的「是」回答您的項目時，Adobe才建議實施SSR。 以下各節介紹如何使用Adobe I/O Runtime。

Adobe I/O Runtime

如果 確信您的項目需要實施SSR,Adobe推薦的解決方案是使用Adobe I/O Runtime。

有關Adobe I/O Runtime的更多資訊，請參見

以下各節詳細介紹了如何使用Adobe I/O Runtime在兩種不SPA同型號中實施SSR:

注意

Adobe建議每個環境（階段、生產、測試等）單獨使用Adobe I/O Runtime工作區。 這允許使用將單個應用程式的不同版本部署到不同環境的典型系統開發生命週期(SDLC)模式。 查看文檔 項目螢火蟲應用的CI/CD 的子菜單。

每個實例（作者、發佈）不需要單獨的工作區，除非每個實例類型的運行時實現存在差異。

遠程呈現器配置

必AEM須知道可以在何處檢索遠程呈現的內容。 無論 你為SSR所選擇的模型， 您需要指定如何訪AEM問此遠程呈現服務。

此操作通過 RemoteContentRenderer — 配置工廠OSGi服務。 在Web控制台配置控制台中搜索字串「RemoteContentRenderer」 http://<host>:<port>/system/console/configMgr。

呈現器配置

以下欄位可用於配置：

  • 內容路徑模式 — 規則運算式，以匹配一部分內容（如有必要）
  • 遠程終結點URL — 負責生成內容的終結點的URL
    • 如果本地網路中沒有，則使用安全的HTTPS協定。
  • 其他請求標頭 — 要添加到發送到遠程終結點的請求的其他標頭
    • 模式： key=value
  • 請求超時 — 遠程主機請求超時（毫秒）
注意

無論您是否選擇實施 AEM驅動通信流 或 Adobe I/O Runtime驅動的流， 必須定義遠程內容呈現器配置。

注意

此配置利用 遠程內容呈現器， 有其他擴展和自定義選項。

AEM驅動通信流

使用SSR時， 元件交互工作流 中SPA包AEM括在Adobe I/O Runtime上生成應用程式初始內容的階段。

  1. 瀏覽器從請求SSR內AEM容。
  2. 把AEM模型發給Adobe I/O Runtime。
  3. Adobe I/O Runtime返回生成的內容。
  4. 為Adobe I/O RuntimeAEM通過後端頁面元件的HTL模板返回的HTML提供服務。

SSE CMS驅動的AEMAdobe I/O

Adobe I/O Runtime驅動的通信流

上一節介紹了在其中執行內容引導和服務的SPA服務AEM器端呈現的AEM標準和建議實施。

或者，SSR可以實現，使得Adobe I/O Runtime負責自舉，有效地逆轉通信流。

兩種模型均有效且受支AEM持。 然而，在實施特定模式之前，應考慮每個模式的利弊。

引導 優勢 缺點
AEM
  • AEM管理按需注入庫
  • 只需維護資AEM源
  • 開發人員可能不SPA熟悉
Adobe I/O Runtime
  • 開發人員更SPA熟悉
  • 應用程式所需的客戶端庫資源（如CSS和JavaScript）需要由開發人員通AEM過 allowProxy 屬性
  • 資源必須在與Adobe I/O RuntimeAEM之間同步
  • 要啟用對的創SPA作，可能需要Adobe I/O Runtime的代理伺服器

SSR規劃

通常只需要呈現應用程式的一部分。 通常的示例是呈現伺服器端的頁面初始載入時將顯示在折疊上方的內容。 這通過將已呈現的內容發送到客戶端而節省時間。 當用戶與該交互時SPA，該附加內容由該客戶端呈現。

在考慮為您的應用程式實SPA施伺服器端呈現時，您需要查看應用程式需要哪些部分。

利用SSRSPA開發

可SPA由客戶端（在瀏覽器中）或伺服器端呈現元件。 呈現伺服器端時，瀏覽器屬性（如窗口大小和位置）不存在。 因SPA此，分量應是同構的，不應假設它們將在何處渲染。

要利用SSR，您需要在中和在AEMAdobe I/O Runtime部署代碼，後者負責伺服器端呈現。 大多數代碼將相同，但特定於伺服器的任務將不同。

SSRSPA在AEM

中的SPASSRAEM需要Adobe I/O Runtime，該應用程式需要呈現應用程式內容伺服器端。 在應用的HTL中，調用Adobe I/O Runtime上的資源來呈現內容。

正如支AEM持Angular和反SPA應框架開箱即用一樣，Angular和反應應用程式也支援伺服器端呈現。 有關更多詳細資訊，請參閱這兩個框架的NPM文檔。

遠程內容呈現器

的 遠程內容呈現器配置 在中使用SSR時需要SPA的AEM功能，可以針對您的需要擴展和自定義更廣泛的呈現服務。

RemoteContentRenderingService

RemoteContentRenderingService 是OSGi服務，用於檢索在遠程伺服器上呈現的內容，如從Adobe I/O。發送到遠程伺服器的內容基於傳遞的請求參數。

RemoteContentRenderingService 當需要額外的內容操作時，可通過依賴項反轉將其注入到自定義Sling模型或servlet中。

此服務由 RemoteContentRendererRequestHandlerServlet。

RemoteContentRendererRequestHandlerServlet

的 RemoteContentRendererRequestHandlerServlet 可用於以寫程式方式設定請求配置。 DefaultRemoteContentRendererRequestHandlerImpl提供的預設請求處理程式實現，允許您建立多個OSGi配置，以便將內容結構中的某個位置映射到遠程端點。

要添加自定義請求處理程式，請實現 RemoteContentRendererRequestHandler 。 確保設定 Constants.SERVICE_RANKING component屬性到大於100的整數，即 DefaultRemoteContentRendererRequestHandlerImpl。

@Component(immediate = true,
        service = RemoteContentRendererRequestHandler.class,
        property={
            Constants.SERVICE_RANKING +":Integer=1000"
        })
public class CustomRemoteContentRendererRequestHandlerImpl implements RemoteContentRendererRequestHandler {}

配置預設處理程式的OSGi配置

預設處理程式的配置必須按照一節中所述進行配置 遠程內容呈現器配置。

遠程內容呈現器用法

要讓Servlet獲取並返回一些可以注入到頁面的內容，請執行以下操作：

  1. 確保遠程伺服器可訪問。
  2. 將以下片段之一添加到元件的HTL模AEM板中。
  3. （可選）建立或修改OSGi配置。
  4. 瀏覽網站內容

通常，頁面元件的HTL模板是此類功能的主要接收者。

<sly data-sly-resource="${resource @ resourceType='cq/remote/content/renderer/request/handler'}" />

要求

Servlet利用Sling模型導出器序列化元件資料。 預設情況下， com.adobe.cq.export.json.ContainerExporter 和 com.adobe.cq.export.json.ComponentExporter 支援作為Sling型號適配器。 如有必要，您可以添加請求應適用於使用的類 RemoteContentRendererServlet 執行 RemoteContentRendererRequestHandler#getSlingModelAdapterClasses。 其他類必須擴展 ComponentExporter。

本頁內容