SPA 및 서버측 렌더링 spa-and-server-side-rendering
단일 페이지 애플리케이션(SPA)은 종종 기본 애플리케이션처럼 익숙한 방식으로 반응하고 작동하는 풍부하고 동적인 경험을 사용자에게 제공할 수 있습니다. 이 기능은 클라이언트에 의존하여 콘텐츠를 맨 앞에 로드한 다음 사용자 상호 작용을 처리하는 대규모 작업을 수행함으로써 수행됩니다. 이 프로세스는 클라이언트와 서버 사이에 필요한 통신량을 최소화하므로 앱이 반응성이 높아집니다.
그러나 이 프로세스를 수행하면 특히 SPA의 크기가 크고 컨텐츠가 풍부한 경우 초기 로드 시간이 길어질 수 있습니다. 로드 시간을 최적화하기 위해 일부 콘텐츠를 서버측에서 렌더링할 수 있습니다. SSR(서버측 렌더링)을 사용하면 페이지의 초기 로드를 가속화한 다음 추가적인 렌더링을 클라이언트에 전달할 수 있습니다.
SSR 사용 시기 when-to-use-ssr
SSR이 모든 프로젝트에서 필수는 아닙니다. AEM은 SPAAdobe 용 JS SSR을 완전히 지원하지만 모든 프로젝트에 대해 체계적으로 구현하는 것은 권장되지 않습니다.
SSR을 구현하기로 결정할 때는 먼저 장기 유지 관리를 포함하여 SSR을 추가하는 것이 프로젝트에 현실적으로 나타내는 추가적인 복잡성, 노력 및 비용을 추정해야 합니다. SSR 아키텍처는 부가 가치가 예상 비용을 확실히 초과하는 경우에만 선택해야 합니다.
SSR은 일반적으로 다음 질문 중 하나에 명확한 "예"가 있을 때 일부 값을 제공합니다.
- SEO: 트래픽을 가져오는 검색 엔진에 의해 사이트가 제대로 인덱싱되려면 여전히 SSR이 필요합니까? 이제 기본 검색 엔진 크롤러가 JS를 평가한다는 점을 기억하십시오.
- 페이지 속도: SSR이 실제 환경에서 측정 가능한 속도 개선을 제공하고 전반적인 사용자 경험을 추가합니까?
프로젝트에 대해 이 두 가지 질문 중 하나 이상이 명확한 "예"로 답변되는 경우에만 SSR을 구현하는 것이 Adobe에 좋습니다. 다음 섹션에서는 다음의 일부인 Adobe I/O Runtime을 사용하여 이 작업을 수행하는 방법을 설명합니다. App Builder.
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 서비스. 웹 콘솔 구성 콘솔에서 문자열 "RemoteContentRenderer"를 검색합니다. http://<host>:<port>/system/console/configMgr
.
구성에 사용할 수 있는 필드는 다음과 같습니다.
- 컨텐츠 경로 패턴 - 필요한 경우 컨텐츠의 일부와 일치하는 정규 표현식
- 원격 끝점 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은 백엔드 HTML 구성 요소의 HTL 템플릿을 통해 Adobe I/O Runtime에서 반환되는 페이지를 제공합니다.
Adobe I/O Runtime 기반 통신 흐름 adobe-i-o-runtime-driven-communication-flow
이전 섹션에서는 AEM에서 SPA에 대한 서버측 렌더링의 표준 및 권장 구현에 대해 설명합니다. 여기서 AEM은 콘텐츠의 부트스트래핑 및 서비스를 수행합니다.
또는 Adobe I/O Runtime이 부트스트래핑을 담당하도록 SSR을 구현하여 통신 흐름을 효과적으로 반전시킬 수 있다.
두 모델 모두 유효하며 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에서 SPA과 함께 SSR을 사용하는 것이 필요하며, 필요에 따라 확장 및 사용자 정의할 수 있는 보다 일반적인 렌더링 서비스를 제공합니다.
RemoteContentRenderingService remotecontentrenderingservice
RemoteContentRenderingService
Adobe I/O 등 원격 서버에서 렌더링된 콘텐츠를 검색하는 OSGi 서비스입니다. 원격 서버로 전송된 콘텐츠는 전달된 요청 매개 변수를 기반으로 합니다.
RemoteContentRenderingService
추가적인 컨텐츠 조작이 필요한 경우 종속성 반전 을 통해 사용자 지정 Sling 모델 또는 서블릿에 삽입할 수 있습니다.
이 서비스는 내부적으로 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
서블릿이 페이지에 삽입된 일부 컨텐츠를 가져와서 반환하도록 합니다.
- 원격 서버에 액세스할 수 있는지 확인합니다.
- AEM 구성 요소의 HTL 템플릿에 다음 코드 조각 중 하나를 추가합니다.
- OSGi 구성을 생성 또는 수정합니다(선택적).
- 사이트 콘텐츠 검색
일반적으로 페이지 구성 요소의 HTL 템플릿은 이러한 기능의 주요 수신자입니다.
<sly data-sly-resource="${resource @ resourceType='cq/remote/content/renderer/request/handler'}" />
요구 사항 requirements
서블릿은 슬링 모델 익스포터를 사용하여 구성 요소 데이터를 직렬화합니다. 기본적으로 com.adobe.cq.export.json.ContainerExporter
및 com.adobe.cq.export.json.ComponentExporter
슬링 모델 어댑터로 지원됩니다. 필요한 경우 요청을 조정할 클래스를 추가할 수 있습니다. RemoteContentRendererServlet
및 구현 RemoteContentRendererRequestHandler#getSlingModelAdapterClasses
. 추가 클래스는 ComponentExporter
.