SPA和伺服器端轉譯 spa-and-server-side-rendering

概觀 overview

單頁應用程式(SPA)可為使用者提供豐富的動態體驗，以熟悉的方式反應和行為，通常就像原生應用程式一樣。 這是透過依賴使用者端先載入內容，然後進行處理使用者互動的繁重工作來達成 並藉此將使用者端與伺服器之間所需的通訊量降到最低，讓應用程式更具反應性。

不過，這可能會導致較長的初始載入時間，尤其是當SPA較大且內容豐富時。 為了最佳化載入時間，部分內容可以在伺服器端轉譯。 使用伺服器端轉譯(SSR)可以加速頁面的初始載入，然後將進一步的轉譯傳遞給使用者端。

何時使用SSR when-to-use-ssr

並非所有專案都需要SSR。 雖然AEM完全支援適用於SPA的JS SSR，但Adobe不建議將其系統地實作到每個專案。

決定實作SSR時，您必須先估計增加SSR對專案實際代表的其他複雜性、工作量和成本，包括長期維護。 只有在增加值明顯超過預估成本時，才應選擇SSR架構。

SSR通常會在下列任一問題明確為「是」時提供某些值：

只有當這兩個問題中至少有一個問題得到明確的「是」回答時，Adobe才會建議實作SSR。 以下幾節將說明如何使用Adobe I/O Runtime執行此操作。

Adobe I/O Runtime adobe-i-o-runtime

如果您 確信您的專案需要實作SSR，Adobe建議的解決方案是使用Adobe I/O Runtime。

如需Adobe I/O Runtime的詳細資訊，請參閱下列內容：

以下章節詳細說明如何使用Adobe I/O Runtime在兩種不同的模型中為您的SPA實作SSR：

遠端轉譯器設定 remote-renderer-configuration

AEM必須知道可在何處擷取遠端呈現的內容。 不論 您選擇為SSR實作的模型、，您必須向AEM指定如何存取此遠端轉譯服務。

這可透過以下方式完成 RemoteContentRenderer — 設定工廠OSGi服務. 在的Web主控台設定主控台中搜尋字串「RemoteContentRenderer」 http://<host>:<port>/system/console/configMgr.

下列欄位可供設定使用：

AEM導向的通訊流程 aem-driven-communication-flow

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

Adobe I/O Runtime導向的通訊流程 adobe-i-o-runtime-driven-communication-flow

上一節將說明有關AEM中SPA之伺服器端轉譯的標準與建議實作，AEM在此會執行內容的自訂與提供。

或者，您也可以實作SSR，讓Adobe I/O Runtime負責啟動程式，有效反轉通訊流程。

這兩種模式都有效，並受到AEM支援。 不過，在實作特定模型之前，您應該先考量各別的優缺點。

計畫SSR planning-for-ssr

只有部分應用程式必須呈現在伺服器端。 常見的範例是，在頁面初始載入時，顯示在摺疊上方的內容會在伺服器端轉譯。 這可傳送給使用者端已轉譯的內容，以節省時間。 當使用者與SPA互動時，其他內容會由使用者端轉譯。

當您考慮為SPA實作伺服器端轉譯時，請檢閱應用程式的哪些部分有必要。

使用SSR開發SPA developing-an-spa-using-ssr

SPA元件可由使用者端（在瀏覽器中）或伺服器端轉譯。 在轉譯伺服器端時，不會出現瀏覽器屬性，例如視窗大小和位置。 因此，SPA元件應同構，不對其呈現位置做任何假設。

若要使用SSR，請在AEM和Adobe I/O Runtime上部署您的程式碼，由伺服器端轉譯。 大部分的程式碼將相同，但伺服器特定的工作將有所不同。

AEM中SPA的SSR ssr-for-spas-in-aem

AEM中SPA的SSR需要Adobe I/O Runtime，此模組用於轉譯應用程式內容伺服器端。 在應用程式的HTL中，會呼叫Adobe I/O Runtime上的資源來呈現內容。

就像AEM可立即支援Angular和React SPA架構一樣，Angular和React應用程式也支援伺服器端轉譯。 如需詳細資訊，請參閱這兩個架構的NPM檔案。

如需簡單化的範例，請參閱 We.Retail日誌應用程式. 它會呈現整個應用程式伺服器端。 雖然這不是真實世界的範例，但它的確說明了實施SSR所需的條件。

使用Node.js using-node-js

Adobe I/O Runtime是在AEM中為SPA實作SSR的建議解決方案。

對於內部部署AEM例項，也可以使用自訂Node.js例項以上述相同方式實作SSR。 雖然Adobe支援此功能，但不建議使用。

遠端內容轉譯器 remote-content-renderer

此 遠端內容轉譯器設定 在AEM中，若要搭配您的SPA使用SSR，就必須採用更廣范的轉譯服務，您可依照自己的需求加以擴充與自訂。

RemoteContentRenderingService remotecontentrenderingservice

RemoteContentRenderingService 是一項OSGi服務，用於擷取遠端伺服器上呈現的內容，例如從Adobe I/O轉譯。傳送至遠端伺服器的內容是根據傳遞的請求引數。

RemoteContentRenderingService 當需要額外的內容操作時，可以透過相依性反轉插入自訂Sling模型或servlet中。

此服務由內部使用 RemoteContentRendererRequestHandlerServlet.

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設定 configure-default-handler

預設處理常式的設定必須依照一節中的說明進行設定 遠端內容轉譯器設定.

遠端內容轉譯器使用情形 usage

若要讓servlet擷取並傳回部分可插入頁面的內容：

通常，頁面元件的HTL範本是這類功能的主要收件者。

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

要求 requirements

此servlet會使用Sling模型匯出工具來序列化元件資料。 根據預設，兩者皆會 com.adobe.cq.export.json.ContainerExporter 和 com.adobe.cq.export.json.ComponentExporter 支援作為Sling模型介面卡。 如有必要，您可以新增類別，讓請求適應使用 RemoteContentRendererServlet 並實作 RemoteContentRendererRequestHandler#getSlingModelAdapterClasses. 其他類別必須擴充 ComponentExporter.