렌더링
PWA Kit 아키텍처는 React의 렌더링 시스템을 기반으로, 사용자와 개발자 모두에게 유용한 기능을 추가합니다. 이 아키텍처 가이드에서는 PWA Kit 렌더링 시스템의 이러한 기능과 작동 방식에 대해 자세히 설명합니다. 각 기능을 구동하기 위해 함께 제공되는 PWA Kit React SDK와 Retail React App의 구성요소에 각별한 주의를 기울여야 합니다.
좋은 첫인상을 만들려면 사용자가 스토어프런트에 요청하는 첫 페이지를 최대한 빨리 로드해야 합니다. 하지만 첫 페이지 요청은 이후 페이지 요청보다 렌더링하는 데 시간이 더 많이 걸립니다. 업데이트가 필요한 구성요소만이 아니라 페이지의 모든 구성요소를 렌더링해야 하기 때문입니다. 중요한 첫 페이지 로드의 경우, 성능을 최적화하는 강력한 도구인 캐싱을 제공하는 서버 측 렌더링을 사용합니다.
Managed Runtime의 CDN 캐시는 이전에 렌더링된 버전의 페이지를 저장하고 즉시 사용자에게 제공할 수 있습니다. 이미 렌더링한 페이지를 제공하는 것보다 더 빠른 렌더링 방법은 없습니다.
캐싱을 통해 성능을 향상시키는 방법에 대한 자세한 내용은 캐시 적중률 극대화 가이드를 참조하십시오.
서버 측 렌더링을 위한 기본 코드는 앱 서버 내부에서 실행됩니다. 앱 서버는 들어오는 HTTP 요청을 처리하고 이에 대한 응답으로 render라는 함수를 호출하는 Express 앱입니다. 앱 서버는 app/ssr.js에 정의되어 있습니다.
render 함수는 PWA Kit React SDK에서 가져옵니다. 마찬가지로 SDK에서 가져오는 헬퍼 함수는 Express의 인스턴스를 생성하고 모든 GET 요청에 대한 Express route 메서드로 render 함수를 연결합니다.
첫 페이지 로드 후 렌더링 작업은 hydration이라는 프로세스를 통해 서버 측에서 클라이언트 측으로 이전됩니다. hydration 중에 사용자의 브라우저에서 React 앱이 실행되기 시작합니다. 이벤트 핸들러가 즉시 작동하여 사용자 입력에 응답합니다. 페이지 요소는 필요에 따라 클라이언트 측 렌더링에서 사용자 입력에 지시된 대로 렌더링됩니다. 보다 효율적이고 사용자 지향적인 이 렌더링은 React의 유명한 유동적 경험을 가능하게 합니다.
PWA Kit 아키텍처는 내부적으로 작동하면서 서버 측 렌더링에서 클라이언트 측 렌더링으로 최대한 원활하게 전환할 수 있도록 합니다. 예를 들어 모든 구성요소에는 API 요청의 결과로 만들어진 속성까지 포함하여 필요한 모든 속성이 미리 로드되어 있습니다. 서버 측 렌더링 중에 이러한 속성은 직렬화되며 hydration 중에 사용할 수 있도록 페이지 소스에 내장되어 있습니다.
서버 측 환경과 클라이언트 측 환경에서 모두 동일한 코드가 렌더링되므로 동형이어야 합니다. 동형 JavaScript(범용 JavaScript라고도 함)는 특정 런타임 환경에서만 사용할 수 있는 코드 구조에 대한 직접 액세스에 의존하지 않는 코드입니다. 두 환경 모두에서 구성요소를 사용할 수 없는 경우 해당 구성요소와 관련한 조건부 코드를 추가하여 현재 환경에서 사용할 수 있는지 확인해야 합니다.
다음 표에는 조건부 코드와 함께 사용해야 하는 일반적으로 사용되는 몇 가지 구성요소가 나와 있습니다.
| 구성요소 | 설명 | 가용성 |
|---|---|---|
window.location | 브라우저의 현재 URL | 클라이언트 측 전용 |
req | Express의 HTTP 요청 | 서버 측 전용 |
res | Express의 HTTP 응답 | 서버 측 전용 |
렌더링이 클라이언트 측과 서버 측 중 어느 쪽에서 이루어지고 있는지 확인하려면 window 오브젝트가 있는지 확인합니다. 다음 예제에서는 이 기법을 사용하여 클라이언트 측에서만 가격을 렌더링합니다.
개인화되거나 자주 변경되는 콘텐츠와 같은 일부 콘텐츠는 클라이언트 측에서만 렌더링해야 최상의 성능을 얻을 수 있습니다. 자세한 내용은 캐시 적중률 극대화 가이드를 참조하십시오.
PWA Kit 렌더링 시스템은 각 페이지에서 상관관계 ID(UUID v4 형식)를 제공합니다. 상관관계 ID는 PWA Kit의 요청 및 응답을 B2C Commerce API와 같은 다른 시스템의 작업과 매칭하는 데 사용할 수 있습니다.
서버 측에서는 Managed Runtime 인프라의 API 게이트웨이에서 상관관계 ID가 requestId 값으로 설정됩니다. 클라이언트 측에서는 내장 Web Crypto API의 randomUUID() 메서드를 사용하여 각 페이지 탐색과 함께 UUID를 생성합니다.
PWA Kit 애플리케이션에서 상관관계 ID를 가져오려면 useCorrelationId 후크를 가져옵니다.
PWA Kit에서 correlation-x 헤더를 통해 B2C Commerce API로 상관관계 ID를 전달할 수 있습니다. 응답으로 전달된 상관관계 ID가 API의 내부 ID와 결합되어 x-correlation-id 헤더에 반환됩니다.
B2C Commerce API에 상관관계 ID를 사용하는 자세한 방법은 B2C Commerce API 정보를 참조하십시오.
app/ssr.js의 소스 코드를 검토하여 렌더링에 대한 이해도를 높이십시오. 여기에는 페이지의 기본 캐시 수명과 같은 중요한 앱 서버 설정이 포함되어 있습니다.
PWA Kit 설명서에서 Retail React App의 아키텍처 가이드를 놓치지 마십시오.