單頁應用程式(SPA)可以為用戶提供豐富的動態體驗,以熟悉的方式反應和行為,通常就像本機應用程式。 這是通過依靠客戶端將內容預先載入,然後完成處理用戶交互的繁重工作來實現的 從而最大限度地減少客戶端與伺服器之間需要的通信量,使應用更加被動。
但是,這可能導致較長的初始載入時間,尤其是當SPA載荷較大且內容豐富時。 為了優化載入時間,可以在伺服器端呈現一些內容。 使用伺服器端渲染(SSR)可以加快頁面的初始載入,然後將進一步的渲染傳遞給客戶端。
並非所有項目都需要SSR。 雖然AEM完全支援聯署材料安全SPA和保障法,但Adobe並不建議對每個項目系統地實施。
在決定實施SSR時,您必須首先估計SSR的額外複雜性、工作量和成本增加實際上代表項目的哪些額外內容,包括長期維護。 只有當增加值明顯超過估計成本時,才應選擇SSR結構。
SSR通常在以下任一問題出現明確的「是」時提供一些值:
只有在以下兩個問題中至少有一個以明確的「是」回答您的項目時,Adobe才建議實施SSR。 以下各節介紹如何使用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
。
以下欄位可用於配置:
key=value
無論您是否選擇實施 AEM驅動通信流 或 Adobe I/O Runtime驅動的流, 必須定義遠程內容呈現器配置。
此配置利用 遠程內容呈現器, 有其他擴展和自定義選項。
使用SSR時, 元件交互工作流 中SPA包AEM括在Adobe I/O Runtime上生成應用程式初始內容的階段。
上一節介紹了在其中執行內容引導和服務的SPA服務AEM器端呈現的AEM標準和建議實施。
或者,SSR可以實現,使得Adobe I/O Runtime負責自舉,有效地逆轉通信流。
兩種模型均有效且受支AEM持。 然而,在實施特定模式之前,應考慮每個模式的利弊。
引導 | 優勢 | 缺點 |
---|---|---|
AEM |
|
|
Adobe I/O Runtime |
|
|
通常只需要呈現應用程式的一部分。 通常的示例是呈現伺服器端的頁面初始載入時將顯示在折疊上方的內容。 這通過將已呈現的內容發送到客戶端而節省時間。 當用戶與該交互時SPA,該附加內容由該客戶端呈現。
在考慮為您的應用程式實SPA施伺服器端呈現時,您需要查看應用程式需要哪些部分。
可SPA由客戶端(在瀏覽器中)或伺服器端呈現元件。 呈現伺服器端時,瀏覽器屬性(如窗口大小和位置)不存在。 因SPA此,分量應是同構的,不應假設它們將在何處渲染。
要利用SSR,您需要在中和在AEMAdobe I/O Runtime部署代碼,後者負責伺服器端呈現。 大多數代碼將相同,但特定於伺服器的任務將不同。
中的SPASSRAEM需要Adobe I/O Runtime,該應用程式需要呈現應用程式內容伺服器端。 在應用的HTL中,調用Adobe I/O Runtime上的資源來呈現內容。
正如支AEM持Angular和反SPA應框架開箱即用一樣,Angular和反應應用程式也支援伺服器端呈現。 有關更多詳細資訊,請參閱這兩個框架的NPM文檔。
的 遠程內容呈現器配置 在中使用SSR時需要SPA的AEM功能,可以針對您的需要擴展和自定義更廣泛的呈現服務。
RemoteContentRenderingService
是OSGi服務,用於檢索在遠程伺服器上呈現的內容,如從Adobe I/O。發送到遠程伺服器的內容基於傳遞的請求參數。
RemoteContentRenderingService
當需要額外的內容操作時,可通過依賴項反轉將其注入到自定義Sling模型或servlet中。
此服務由 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 {}
預設處理程式的配置必須按照一節中所述進行配置 遠程內容呈現器配置。
要讓Servlet獲取並返回一些可以注入到頁面的內容,請執行以下操作:
通常,頁面元件的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
。