若專案需要SPA架構的用戶端轉譯(例如React或Angular),SPA Editor是建議的解決方案。
AEM 6.5.1.0或更新版本是使用SPA伺服器端轉譯功能的必要條件,如本檔案所述。
單頁應用程式(SPA)可為使用者提供豐富的動態體驗,以熟悉的方式回應和運作,通常就像原生應用程式。 這是通過依靠客戶端在前面載入內容,然後進行用戶交互的重 擔,從而最小化客戶端和伺服器之間需要的通信量,使應用更加被動。
不過,這可能會導致較長的初始載入時間,尤其是如果SPA很大且內容豐富。 為了最佳化載入時間,某些內容可在伺服器端轉譯。 使用伺服器端轉譯(SSR)可以加速頁面的初始載入,然後將轉譯傳遞給用戶端。
並非所有項目都需要SSR。 雖然AEM完全支援SPA適用的JS SSR,但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)模式,將不同版本的單個應用程式部署到不同的環境。 如需詳細資訊,請參閱適用於Project Firefly Applications🔗的檔案CI/CD 。
每個例項(製作、發佈)不需要個別的工作區,除非每個例項類型在執行階段實施中有差異。
AEM必須知道可在何處擷取遠端轉譯的內容。 無論您選擇為SSR實作哪個模型,都需要指定以AEM如何存取此遠端轉譯服務。
這是通過RemoteContentRenderer - Configuration Factory OSGi服務完成的。 在位於http://<host>:<port>/system/console/configMgr
的Web控制台配置控制台中搜索字串"RemoteContentRenderer"。
下列欄位適用於設定:
key=value
無論您選擇實作AEM導向的通訊流或Adobe I/O Runtime導向的流量,您都必須定義遠端內容轉譯器設定。
此配置利用遠程內容呈現器,該呈現器具有其他可用的擴展和自定義選項。
使用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。
上一節將說明針對AEM中的SPA而執行伺服器端轉譯的標準和建議實作,AEM會執行內容的引導及服務。
或者,SSR可以實現,使Adobe I/O Runtime負責引導,有效地逆轉通信流。
這兩種模型均有效,且受AEM支援。 然而,在實施特定模式之前,應考慮每種模式的利弊。
引導 | 優勢 | 缺點 |
---|---|---|
透過AEM |
|
|
透過Adobe I/O Runtime |
|
|
通常,只有應用程式的一部分需要呈現在伺服器端。 常見的範例是,在頁面初始載入時,會在折頁上方顯示的內容會呈現在伺服器端。 這樣可將已呈現的內容傳送給用戶端,節省時間。 當使用者與SPA互動時,用戶端會轉譯其他內容。
當您考慮為SPA實作伺服器端轉譯時,需要檢閱應用程式的哪些部分是必要的。
SPA元件可由用戶端(在瀏覽器中)或伺服器端轉譯。 呈現伺服器端時,瀏覽器屬性(例如視窗大小和位置)不存在。 因此,SPA元件應為同構,不須假設其轉譯位置。
若要運用SSR,您必須在AEM和Adobe I/O Runtime中部署程式碼,後者負責伺服器端轉譯。 大部分的程式碼會相同,但伺服器特定的工作會有所不同。
AEM中的SPA適用的SSR需要Adobe I/O Runtime,這是轉譯應用程式內容伺服器端所呼叫的功能。 在應用程式的HTL內,會呼叫Adobe I/O Runtime上的資源來呈現內容。
正如AEM可立即支援Angular和React SPA架構,Angular和React應用程式也支援伺服器端轉譯。 如需詳細資訊,請參閱這兩個架構的NPM檔案。
如需簡化的範例,請參閱We.Retail Journal應用程式。 它會呈現整個應用程式伺服器端。 雖然這不是現實中的例子,但它確實說明了實施SSR需要什麼。
We.Retail Journal應用程式僅供示範之用,因此會使用Node.js作為簡單範例,而非建議的Adobe I/O Runtime。 此範例不應用於任何專案工作。
任何AEM專案都應運用AEM專案原型,這可支援使用React或Angular的SPA專案,並運用SPA SDK。
Adobe I/O Runtime是在AEM中實作SPA SSR的建議解決方案。
若為內部部署的AEM例項,您也可以使用與上述相同的方式,使用自訂Node.js例項來實作SSR。 雖然Adobe支援此功能,但不建議使用。
托管於Adobe的AEM例項不支援Node.js。
如果SSR必須透過Node.js實作,Adobe建議為每個AEM環境(製作、發佈、預備等)使用個別的Node.js例項。
在AEM中搭配SPA使用SSR所需的遠端內容轉譯器設定會點選更廣義的轉譯服務,以符合您的需求並加以擴充和自訂。
RemoteContentRenderingService
是OSGi服務,用於擷取在遠端伺服器上轉譯的內容,例如從Adobe I/O。傳送至遠端伺服器的內容是根據所傳遞的要求參數。
RemoteContentRenderingService
可在需要進行其他內容操作時,透過相依性反轉插入自訂Sling模型或servlet中。
此服務由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 {}
預設處理程式的配置必須如遠程內容呈現器配置一節中所述配置。
若要讓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
。