자바스크립트 + 리액트 디자인 패턴

348

자바스크립트 + 리액트 디자인 패턴

아일랜드 아키텍처는 정적 콘텐츠로 이루어진 페이지의

SSR

을 지원합니다. 이때 렌더링된

HTML

에는 동적 콘텐츠를 위한 자리가 미리 마련되어 있습니다. 이 동적 콘텐츠 자리에는

자체적으로 완성된 컴포넌트 위젯이 들어가게 됩니다. 각 위젯은 독립적인 애플리케이션처

럼 동작하며, 서버에서 렌더링된 결과물과 클라이언트에서 위젯을 활성화하는 데 사용될 자

바스크립트 코드를 포함합니다.

아일랜드 아키텍처는 점진적 하이드레이션과 혼동될 수 있지만, 뚜렷한 차이점이 있습니다.

점진적 하이드레이션에서는 페이지의 하이드레이션 구조가 하향식

top

-

down

입니다. 즉, 페이지

가 개별 컴포넌트의 스케줄링 및 하이드레이션을 제어합니다. 반면, 아일랜드 아키텍처에서

는 각 컴포넌트가 자체적으로 하이드레이션 스크립트를 가지고 있으며, 이 스크립트는 페이

지의 다른 스크립트와 독립적으로 비동기 실행됩니다. 따라서 특정 컴포넌트의 성능 문제가

다른 컴포넌트에 영향을 주지 않습니다.

13.9.1

아일랜드 아키텍처 구현하기

아일랜드 아키텍처는 다양한 곳에서 개념을 차용하여 최적으로 결합하는 것을 목표로 합니

다. 예를 들어

Jekyll

이나

Hugo

와 같은 템플릿 기반 정적 사이트 생성기는 페이지에 정적 컴

포넌트를 렌더링하는 기능을 지원합니다. 또한