SPA和服务器端渲染

概述

单页应用程序(SPA)可以优惠用户丰富的动态体验，这种体验以熟悉的方式反应和行为，通常就像本机应用程序一样。 这是通过依赖客户端预先加载内容，然后进行处理用户交互的重 力提升，从而最小化客户端和服务器之间需要的通信量，使应用更加被动。

但是，这会导致较长的初始加载时间，尤其是当SPA较大且内容丰富时。 为了优化加载时间，某些内容可在服务器端呈现。 使用服务器端渲染(SSR)可以加速页面的初始加载，然后将进一步的渲染传递给客户端。

何时使用SSR

并非所有项目都需要SSR。 尽管AEM完全支持SPA的JS SSR，但Adobe不建议在每个项目系统地实施它。

在决定实施SSR时，您首先必须估计SSR的实际额外复杂度、工作量和成本增加，包括长期维护。 只有当SSR的附加值明显超过估计成本时，才应选择SSR体系结构。

SSR通常在以下任一问题有明确的“是”时提供一些值：

• SEO: 是否仍需要SSR才能由带来流量的搜索引擎正确编制网站索引？请记住，主搜索引擎爬网程序现在会评估JS。
• 页面速度： SSR能否在真实环境中提供可衡量的速度提升，并增加整体用户体验？

只有在以下两个问题中至少有一个得到明确的“是”回答时，Adobe才建议实施SSR。 以下各节介绍如何使用Adobe I/O Runtime执行此操作。

Adobe I/O Runtime

如果确信您的项目需要实施SSR，则Adobe建议的解决方案是使用Adobe I/O Runtime。

有关Adobe I/O Runtime的更多信息，请参阅

• https://www.adobe.io/apis/experienceplatform/runtime.html — 有关服务的概述
• https://www.adobe.io/apis/experienceplatform/runtime/docs.html — 有关平台的详细文档

以下各节详细介绍了如何使用Adobe I/O Runtime在两种不同的模型中为SPA实施SSR:

• AEM驱动的通信流
• Adobe I/O Runtime驱动的通信流

远程渲染器配置

AEM必须知道可以在何处检索远程渲染的内容。 无论您选择为SSR实现哪个型号,都需要指定给AEM如何访问此远程渲染服务。

这通过​RemoteContentRenderer - Configuration Factory OSGi服务​完成。 在Web控制台配置控制台(http://<host>:<port>/system/console/configMgr)中搜索字符串“RemoteContentRenderer”。

以下字段可用于配置：

• 内容路径模式 — 正则表达式，以便匹配内容的一部分（如果需要）
• 远程端点URL — 负责生成内容的端点的URL
  • 如果本地网络中没有安全HTTPS协议，请使用该协议。
• 附加请求标头 — 要添加到发送到远程端点的请求中的附加标头
  • 图案：key=value
• 请求超时 — 远程主机请求超时（毫秒）

AEM驱动通信流

使用SSR时，AEM中的组件交互工作流包括在Adobe I/O Runtime上生成应用程序初始内容的阶段。

1. 浏览器从AEM请求SSR内容。

2. AEM将模型发布到Adobe I/O Runtime。

3. Adobe I/O Runtime返回生成的内容。

4. AEM为Adobe I/O Runtime通过后端页面组件的HTL模板返回的HTML提供服务。

Adobe I/O Runtime驱动通信流

上一节介绍了与AEM中的SPA相关的服务器端渲染的标准和建议实现，其中AEM执行内容的引导和服务。

或者，SSR可以实现，使Adobe I/O Runtime负责自举，有效地逆转通信流。

这两种型号均有效且受AEM支持。 然而，在实施特定模式之前，应考虑每种模式的优点和劣势。

引导	优势	缺点
通过AEM	AEM在需要时管理注入库 只需在AEM 上维护资源	SPA开发人员 可能不熟悉
通过Adobe I/O Runtime	更熟悉SPA开发人员	AEM开发人员需要通过allowProxy属性 使用应用程序所需的Clientlib资源（如CSS和JavaScript） 必须在AEM和Adobe I/O Runtime 之间同步资源 要启用SPA的创作，可能需要Adobe I/O Runtime的代理服务器

SSR规划

通常，只需呈现应用程序的一部分即可。 常见的示例是呈现在页面初始加载时折叠上方的内容。 这通过将已呈现的内容交付到客户端来节省时间。 当用户与SPA交互时，客户端将呈现附加内容。

在考虑为SPA实施服务器端渲染时，您需要查看应用程序中需要哪些部分。

使用SSR开发SPA

SPA组件可由客户端（在浏览器中）或服务器端呈现。 呈现服务器端时，浏览器属性（如窗口大小和位置）不存在。 因此，SPA组件应是同构的，不应假定它们将呈现在何处。

要利用SSR，您需要在AEM和Adobe I/O Runtime上部署代码，后者负责服务器端渲染。 大多数代码将相同，但特定于服务器的任务将不同。

AEM中SPA的SSR

AEM中的SPA SSR需要Adobe I/O Runtime，它用于呈现应用程序内容服务器端。 在应用程序的HTL中，调用Adobe I/O Runtime上的资源来呈现内容。

正如AEM支持开箱即用的Angular和React SPA框架一样，Angular和React应用程序也支持服务器端呈现。 有关更多详细信息，请参阅两个框架的NPM文档。

• 反应：https://github.com/adobe/aem-sample-we-retail-journal/blob/master/react-app/DEVELOPMENT.md#enabling-the-server-side-rendering-using-the-aem-page-component
• Angular:https://github.com/adobe/aem-sample-we-retail-journal/blob/master/react-app/DEVELOPMENT.md#enabling-the-server-side-rendering-using-the-aem-page-component

有关简化的示例，请参阅We.Retail Journal应用程序。 它呈现整个应用程序服务器端。 虽然这不是一个真实的例子，但它确实说明了实施SSR需要什么。

使用Node.js

Adobe I/O Runtime是在AEM中实施SSR for SPA的推荐解决方案。

对于预先创建的AEM实例，也可以使用自定义Node.js实例以如上所述的相同方式实现SSR。 尽管Adobe支持此功能，但不建议这样做。

远程内容渲染器

在AEM中将SSR与SPA一起使用所需的远程内容渲染器配置可点击到更广泛的渲染服务，该服务可以扩展和自定义以满足您的需要。

RemoteContentRenderingService

RemoteContentRenderingService 是用于检索在远程服务器上呈现的内容(如从Adobe I/O)的OSGi服务。发送到远程服务器的内容基于传递的请求参数。

RemoteContentRenderingService 当需要额外的内容操作时，可通过依赖性反转注入自定义Sling模型或servlet。

此服务由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配置

必须按照远程内容渲染器配置部分中的说明配置默认处理函数。

远程内容渲染器用法

要使Servlet获取并返回一些可以注入到页面的内容，请执行以下操作：

1. 确保远程服务器可访问。
2. 将以下代码片段之一添加到AEM组件的HTL模板。
3. （可选）创建或修改OSGi配置。
4. 浏览站点内容

通常，页面组件的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。