对于需要基于SPA框架的客户端渲染(例如,响应或Angular)的项目,建议使用SPA Editor。
使用SPA服务器端渲染功能需要AEM 6.5.1.0或更高版本,如本文档所述。
单页应用程序(SPA)可以优惠用户丰富的动态体验,这种体验以熟悉的方式反应和行为,通常就像本机应用程序一样。 这是通过依赖客户端预先加载内容,然后进行处理用户交互的重 力提升,从而最小化客户端和服务器之间需要的通信量,使应用更加被动。
但是,这会导致较长的初始加载时间,尤其是当SPA较大且内容丰富时。 为了优化加载时间,某些内容可在服务器端呈现。 使用服务器端渲染(SSR)可以加速页面的初始加载,然后将进一步的渲染传递给客户端。
并非所有项目都需要SSR。 尽管AEM完全支持SPA的JS SSR,但Adobe不建议在每个项目系统地实施它。
在决定实施SSR时,您首先必须估计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建议为每个AEM环境(创作、发布、舞台等)使用单独的Adobe I/O Runtime实例。
AEM必须知道可以在何处检索远程渲染的内容。 无论您选择为SSR实现哪个型号,都需要指定给AEM如何访问此远程渲染服务。
这通过RemoteContentRenderer - Configuration Factory OSGi服务完成。 在Web控制台配置控制台(http://<host>:<port>/system/console/configMgr
)中搜索字符串“RemoteContentRenderer”。
以下字段可用于配置:
key=value
无论您选择实现AEM驱动的通信流还是Adobe I/O Runtime驱动的通信流,都必须定义远程内容渲染器配置。
此配置利用远程内容渲染器,该渲染器具有可用的其他扩展和自定义选项。
使用SSR时,AEM中的组件交互工作流包括在Adobe I/O Runtime上生成应用程序初始内容的阶段。
浏览器从AEM请求SSR内容。
AEM将模型发布到Adobe I/O Runtime。
Adobe I/O Runtime返回生成的内容。
AEM为Adobe I/O Runtime通过后端页面组件的HTL模板返回的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中实施SSR for SPA的推荐解决方案。
对于预先创建的AEM实例,也可以使用自定义Node.js实例以如上所述的相同方式实现SSR。 尽管Adobe支持此功能,但不建议这样做。
托管Adobe的AEM实例不支持Node.js。
如果SSR必须通过Node.js实现,Adobe建议为每个AEM环境(作者、发布、舞台等)使用单独的Node.js实例。
在AEM中将SSR与SPA一起使用所需的远程内容渲染器配置可点击到更广泛的渲染服务,该服务可以扩展和自定义以满足您的需要。
RemoteContentRenderingService
是用于检索在远程服务器上呈现的内容(如从Adobe I/O)的OSGi服务。发送到远程服务器的内容基于传递的请求参数。
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 Model Exporter序列化组件数据。 默认情况下,com.adobe.cq.export.json.ContainerExporter
和com.adobe.cq.export.json.ComponentExporter
都支持作为Sling Model适配器。 如有必要,可以添加类,请求应适用于使用RemoteContentRendererServlet
并实现RemoteContentRendererRequestHandler#getSlingModelAdapterClasses
。 其他类必须扩展ComponentExporter
。