SPA和伺服器端轉譯 spa-and-server-side-rendering
單頁應用程式(SPA)可為使用者提供豐富的動態體驗，以熟悉的方式反應和行為，通常就像原生應用程式一樣。 此功能是藉由依賴使用者端先載入內容，然後再處理使用者互動來達成。 此程式可將使用者端與伺服器之間所需的通訊量降至最低，讓應用程式更具反應性。
不過，此程式可能會導致較長的初始載入時間，尤其是當SPA較大且內容豐富時。 為了最佳化載入時間，部分內容可以在伺服器端轉譯。 使用伺服器端轉譯(SSR)可以加速頁面的初始載入，然後將進一步的轉譯傳遞給使用者端。
何時使用SSR when-to-use-ssr
並非所有專案都需要SSR。 雖然AEM完全支援適用於SPA的JS SSR，但Adobe不建議將其系統地實作到每個專案。
決定實作SSR時，您必須先估計增加SSR對專案實際代表的其他複雜性、工作量和成本，包括長期維護。 只有在增加值明顯超過預估成本時，才應選擇SSR架構。
SSR通常會在下列任一問題明確為「是」時提供某些值：
- SEO： 您的網站是否仍需要SSR才能由帶來流量的搜尋引擎正確編制索引？ 請記住，主要搜尋引擎編目程式現在會評估JS。
- 頁面速度： SSR是否能在真實環境中提供可衡量的速度提升，並增加整體使用者體驗？
只有當這兩個問題中至少有一個問題得到明確的「是」回答時，Adobe才會建議實作SSR。 以下章節說明如何使用App Builder中的Adobe I/O Runtime執行此工作。
Adobe I/O Runtime adobe-i-o-runtime
如果您確信您的專案需要實作SSR，Adobe建議的解決方案是使用Adobe I/O Runtime。
如需Adobe I/O Runtime的詳細資訊，請參閱下列內容：
- https://developer.adobe.com/runtime — 概述App Builder的執行階段功能
- https://developer.adobe.com/app-builder — 如需完整App Builder產品的詳細資訊
- https://developer.adobe.com/runtime/docs/ — 如需詳細檔案
以下章節詳細說明如何使用Adobe I/O Runtime在兩種不同的模型中為您的SPA實作SSR：
遠端轉譯器設定 remote-content-renderer-configuration
AEM必須知道可在何處擷取遠端呈現的內容。 無論您選擇為SSR實作哪種模型，您必須指定給AEM如何存取此遠端轉譯服務。
此服務是透過 RemoteContentRenderer - Configuration Factory OSGi服務 完成的。 在http://<host>:<port>/system/console/configMgr的Web主控台組態主控台中搜尋字串「RemoteContentRenderer」。
下列欄位可供設定使用：
- 內容路徑模式 — 符合部分內容的規則運算式（如有必要）
- 遠端端點URL — 負責產生內容的端點URL
- 若不在本機網路中，請使用安全的HTTPS通訊協定。
- 其他要求標頭 — 要新增至傳送至遠端端點之要求的其他標頭
- 模式：
key=value
- 模式：
- 要求逾時 — 遠端主機要求逾時（毫秒）
AEM導向的通訊流程 aem-driven-communication-flow
使用SSR時，AEM中SPA的元件互動工作流程包含在Adobe I/O Runtime上產生應用程式初始內容的階段。
- 瀏覽器向AEM要求SSR內容。
- AEM會將模型發佈至Adobe I/O Runtime。
- Adobe I/O Runtime會傳回產生的內容。
- AEM透過後端頁面元件的HTL範本，提供Adobe I/O Runtime傳回的HTML。
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檔案。
遠端內容轉譯器 remote-content-renderer
在AEM中搭配使用SSR與SPA所需的遠端內容轉譯器組態，會進入更一般的轉譯服務，您可以擴充和自訂這些服務，以符合您的需求。
RemoteContentRenderingService remotecontentrenderingservice
RemoteContentRenderingService用於擷取遠端伺服器上轉譯之內容的OSGi服務，例如從Adobe I/O。傳送至遠端伺服器的內容是根據傳遞的請求引數。
RemoteContentRenderingService當需要額外的內容操作時，可由相依性反轉插入自訂Sling模型或servlet中。
此服務是由RemoteContentRendererRequestHandlerServlet在內部使用。
RemoteContentRendererRequestHandlerServlet remotecontentrendererrequesthandlerservlet
RemoteContentRendererRequestHandlerServlet可用來以程式設計方式設定要求組態。 DefaultRemoteContentRendererRequestHandlerImpl是提供的預設要求處理常式實作，可讓您建立多個OSGi設定，以便將內容結構中的位置對應到遠端端點。
若要新增自訂要求處理常式，請實作RemoteContentRendererRequestHandler介面。 請務必將Constants.SERVICE_RANKING元件屬性設為大於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擷取並傳回一些插入頁面的內容：
- 確定您的遠端伺服器可以存取。
- 將下列其中一個片段新增至AEM元件的HTL範本。
- 選擇性地建立或修改OSGi設定。
- 瀏覽網站內容
通常，頁面元件的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。