单页应用程序(SPA)可以为用户提供丰富的动态体验,该体验以熟悉的方式反应和行为,通常就像本机应用程序一样。 这是依靠客户端预先加载内容,然后执行处理用户交互的重提升 从而最大限度地减少客户端和服务器之间所需的通信量,使应用程序更具反应性。
但是,这可能会导致初始加载时间较长,尤其是当SPA较大且内容丰富时。 为了优化加载时间,可以在服务器端渲染某些内容。 使用服务器端渲染(SSR)可以加快页面的初始加载,然后将进一步的渲染传递给客户端。
并非所有项目都需要SSR。 尽管AEM完全支持适用于SPA的JS SSR,但Adobe建议不要为每个项目系统地实施它。
在决定实施SSR时,您必须首先估计增加SSR对项目实际意味着哪些额外的复杂性、工作量和成本,包括长期维护。 只有在增加值明显超过估计成本时,才应选择SSR架构。
当以下任一问题明确为“是”时,SSR通常会提供一些值:
只有当这两个问题中至少有一个问题得到明确的“是”回答时,Adobe才会建议实施SSR。 以下部分介绍了如何使用Adobe I/O Runtime(的一部分)执行此操作 App Builder.
如果您 确信您的项目需要实施SSR,Adobe推荐的解决方案是使用Adobe I/O Runtime。
有关Adobe I/O Runtime的更多信息,请参阅
以下部分详细介绍如何使用Adobe I/O Runtime在两种不同的模型中为SPA实施SSR:
Adobe建议为每个环境(暂存、生产、测试等)使用单独的Adobe I/O Runtime工作区。 这样一来,对于部署到不同环境的单个应用程序的不同版本,就可以采用典型的系统开发生命周期(SDLC)模式。 查看文档 App Builder应用程序的CI/CD 了解更多信息。
每个实例(创作、发布)不需要单独的工作区,除非每个实例类型的运行时实施存在差异。
AEM必须知道可在何处检索远程渲染的内容。 不论 您选择为SSR实施的模型, 您需要向AEM指定如何访问此远程渲染服务。
这是通过 RemoteContentRenderer — 配置工厂OSGi服务. 在Web控制台配置控制台中搜索字符串“RemoteContentRenderer”,网址为 http://<host>:<port>/system/console/configMgr
.
以下字段可用于配置:
key=value
无论您是否选择实施 AEM驱动的通信流 或 Adobe I/O Runtime驱动的流量, 您必须定义远程内容渲染器配置。
此配置利用 远程内容呈现器、 提供了其他扩展和自定义选项。
使用SSR时, 组件交互工作流 AEM中的SPA包含在Adobe I/O Runtime上生成应用程序初始内容的阶段。
上一部分介绍了与AEM中的SPA有关的服务器端渲染的标准实施和建议实施,AEM在该环境中执行内容引导和提供。
或者,可以实现SSR,以便Adobe I/O Runtime负责自引导,有效地反转通信流。
这两个模型均有效,并受AEM支持。 但是,在实施特定模型之前,应该考虑每种模型的优缺点。
Bootstrapping | 优点 | 缺点 |
---|---|---|
通过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文档。
此 远程内容渲染器配置 在AEM中将SSR与SPA结合使用时,需要用到更广泛的渲染服务,可根据您的需求对其进行扩展和自定义。
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
.