아일랜드 아키텍처

Astro는 아일랜드 아키텍처라고 불리는 새로운 프런트엔드 아키텍처 패턴을 개척하고 대중화하는 데 도움을 주었습니다. 아일랜드 아키텍처는 페이지의 대부분을 빠르고 정적인 HTML로 렌더링하고, 페이지에서 상호 작용이나 개인화가 필요한 경우 (예: 이미지 캐러셀) 더 작은 “아일랜드”의 JavaScript를 추가하는 방식으로 작동합니다. 이렇게 하면 많은 최신 JavaScript 웹 프레임워크의 응답 속도를 느리게 하는 모놀리식 JavaScript 페이로드를 피할 수 있습니다.

간략한 역사

”컴포넌트 아일랜드”라는 용어는 2019년 Etsy의 프런트엔드 설계자인 Katie Sylor-Miller가 처음 만들었습니다. 이 아이디어는 Preact 제작자인 Jason Miller가 2020년 8월 11일 이 게시물에서 확장하고 문서화했습니다.

”아일랜드” 아키텍처의 일반적인 아이디어는 서버에서 HTML 페이지를 렌더링하고 매우 동적인 영역 주위에 자리 표시자 또는 슬롯을 삽입하는 것으로 놀라울 정도로 간단합니다. […] 클라이언트에서 이러한 영역을 “하이드레이션”하여 서버에서 렌더링된 초기 HTML을 재사용하는 작고 독립적인 위젯으로 만들 수 있습니다.
— Jason Miller, Preact 제작자

이 아키텍처 패턴이 기반으로 하는 기술은 부분 하이드레이션 또는 선택적 하이드레이션이라고도 합니다.

이와 대조적으로, 대부분의 JavaScript 기반 웹 프레임워크는 전체 웹사이트를 하나의 큰 JavaScript 애플리케이션 (싱글 페이지 애플리케이션 또는 SPA라고도 함)으로 하이드레이션 및 렌더링합니다. SPA는 단순성과 강력한 기능을 제공하지만, 과도한 클라이언트 측 JavaScript 사용으로 인해 페이지 로드 성능 문제가 발생합니다.

SPA는 다양한 방식으로 활용될 수 있으며, 심지어 Astro 페이지에 포함될 수도 있습니다. 그러나 SPA는 선택적이고 전략적으로 하이드레이션하는 기본 기능이 부족하여 오늘날 대부분의 웹 프로젝트에 과도한 선택이 됩니다.

Astro는 Sylor-Miller가 처음 만든 컴포넌트 아일랜드 패턴을 사용하여 선택적 하이드레이션이 내장된 최초의 주류 JavaScript 웹 프레임워크로 인기를 얻었습니다. 이후 Sylor-Miller의 원래 작업을 확장하고 발전시켜 동적으로 서버 렌더링된 콘텐츠에 대한 유사한 컴포넌트 아일랜드 접근 방식을 구현하는 데 도움을 주었습니다.

아일랜드란?

Astro에서 아일랜드는 정적인 HTML 페이지에 있는 향상된 UI 컴포넌트입니다.

클라이언트 아일랜드는 페이지의 나머지 부분과 별도로 하이드레이션되는 대화형 JavaScript UI 컴포넌트이고, 서버 아일랜드는 페이지의 나머지 부분과 별도로 동적 콘텐츠를 서버 렌더링하는 UI 컴포넌트입니다.

두 아일랜드 모두 최적화된 페이지 로드를 위해 처리 비용이 높거나 느린 프로세스를 컴포넌트 단위로 독립적으로 실행합니다.

아일랜드 컴포넌트

Astro 컴포넌트는 페이지 템플릿의 구성 요소입니다. 클라이언트 측 런타임 없이 정적 HTML로 렌더링됩니다.

클라이언트 아일랜드는 정적이고 가벼운 서버 렌더링된 HTML 바다에 떠 있는 대화형 위젯이라고 생각하면 됩니다. 서버 아일랜드는 로그인한 방문자의 프로필 사진과 같이 개인화되거나 동적으로 서버 렌더링된 요소를 추가하는 데 사용할 수 있습니다.

텍스트, 이미지 등 정적 콘텐츠

이미지 캐러셀 (대화형 아일랜드)

출처: Islands Architecture: Jason Miller

아일랜드는 항상 페이지의 다른 아일랜드와 격리되어 실행되며, 여러 개의 아일랜드가 페이지에 존재할 수 있습니다. 클라이언트 아일랜드는 서로 다른 컴포넌트 컨텍스트에서 실행되더라도 상태를 공유하고 서로 통신할 수 있습니다.

이러한 유연성 덕분에 Astro는 React, Preact, Svelte, Vue, SolidJS와 같은 여러 UI 프레임워크를 지원할 수 있습니다. 독립적이기 때문에 각 페이지에서 여러 프레임워크를 혼합하여 사용할 수도 있습니다.

클라이언트 아일랜드

기본적으로 Astro는 모든 UI 컴포넌트를 HTML과 CSS만으로 자동 렌더링하며 클라이언트 측 JavaScript를 모두 자동으로 제거합니다.

<MyReactComponent />

이것이 엄격하게 들릴 수도 있지만, 이러한 동작은 Astro 웹사이트를 기본적으로 빠르게 유지하고 개발자가 웹사이트 속도를 저하시킬 수 있는 불필요하거나 원치 않는 JavaScript를 실수로 보내는 것으로부터 보호하는 역할을 합니다.

정적 UI 컴포넌트를 대화형 아일랜드로 바꾸려면 client:* 지시어만 있으면 됩니다. 그러면 Astro는 최적화된 성능을 위해 클라이언트 측 JavaScript를 자동으로 빌드하고 번들링합니다.

<!-- 이 컴포넌트는 이제 페이지에서 상호 작용이 가능합니다!
     웹사이트의 나머지 부분은 정적으로 유지됩니다. -->
<MyReactComponent client:load />

아일랜드를 사용하면 클라이언트 측 JavaScript는 client:* 지시어를 사용하여 명시적으로 표시한 대화형 컴포넌트에 대해서만 로드됩니다.

그리고 상호 작용이 컴포넌트 수준에서 구성되기 때문에 각 컴포넌트의 사용량에 따라 다른 로딩 우선순위를 처리할 수 있습니다. 예를 들어, client:idle은 브라우저가 유휴 상태가 될 때 컴포넌트를 로드하도록 지시하고, client:visible은 컴포넌트가 뷰포트에 들어올 때만 로드하도록 지시합니다.

클라이언트 아일랜드의 이점

Astro 아일랜드로 빌드하는 가장 큰 이점은 성능입니다. 웹사이트의 대부분은 빠르고 정적인 HTML로 변환되고 JavaScript는 필요한 개별 컴포넌트에 대해서만 로드됩니다. JavaScript는 바이트당 로드할 수 있는 가장 느린 자산 중 하나이므로 모든 바이트가 중요합니다.

또 다른 이점은 병렬 로딩입니다. 위의 예시 그림에서 낮은 우선순위의 “이미지 캐러셀” 아일랜드는 높은 우선순위의 “헤더” 아일랜드를 차단할 필요가 없습니다. 두 아일랜드는 병렬로 로드되고 격리되어 하이드레이션되므로, 헤더는 페이지 아래쪽에 있는 더 무거운 캐러셀을 기다릴 필요 없이 즉시 상호 작용이 가능해집니다.

훨씬 더 좋은 점은 각 컴포넌트를 어떻게 그리고 언제 렌더링할지 Astro에게 정확하게 지시할 수 있다는 것입니다. 이미지 캐러셀의 로드 비용이 매우 높다면 Astro에게 페이지에 표시될 때만 캐러셀을 로드하도록 지시하는 특수 클라이언트 지시어를 첨부할 수 있습니다. 사용자가 캐러셀을 보지 못하면 캐러셀은 로드되지 않습니다.

Astro에서는 개발자인 여러분이 페이지의 어떤 컴포넌트가 브라우저에서 실행되어야 하는지 명시적으로 Astro에게 알려줘야 합니다. Astro는 페이지에서 필요한 것만 정확하게 하이드레이션하고 나머지 사이트는 정적 HTML로 유지합니다.

클라이언트 아일랜드는 Astro의 기본적으로 빠른 성능을 유지하는 비결입니다!

프로젝트에서 JavaScript 프레임워크 컴포넌트 사용에 대해 자세히 알아보세요.

서버 아일랜드

서버 아일랜드는 비용이 많이 들거나 느린 서버 측 코드를 주요 렌더링 프로세스에서 분리하여 고성능 정적 HTML과 서버에서 생성된 동적 컴포넌트를 쉽게 결합할 수 있도록 합니다.

페이지의 모든 Astro 컴포넌트에 server:defer 지시어를 추가하여 자체 서버 아일랜드로 전환할 수 있습니다.

---
import Avatar from '../components/Avatar.astro';
---
<Avatar server:defer />

이렇게 하면 페이지가 더 작은 서버 렌더링된 콘텐츠 영역으로 나뉘어 각 영역이 병렬로 로드됩니다.

페이지의 주요 콘텐츠는 아일랜드 자체 콘텐츠를 사용할 수 있을 때까지 기본 아바타와 같은 자리 표시자 콘텐츠와 함께 즉시 렌더링될 수 있습니다. 서버 아일랜드를 사용하면 개인화된 콘텐츠의 작은 컴포넌트가 있는 경우에도 정적 페이지의 렌더링이 지연되지 않습니다.

이 렌더링 패턴은 이식 가능하도록 설계되었습니다. 특정 서버 인프라에 의존하지 않으므로 Docker 컨테이너의 Node.js 서버부터 원하는 서버리스 공급자까지 모든 호스트에서 작동합니다.

서버 아일랜드의 이점

서버 아일랜드의 한 가지 이점은 페이지의 더욱 동적인 부분을 즉석에서 렌더링할 수 있다는 것입니다. 이를 통해 외부 셸과 주요 콘텐츠를 보다 적극적으로 캐시할 수 있어 더 빠른 성능을 제공합니다.

또 다른 이점은 훌륭한 방문자 경험을 제공한다는 것입니다. 서버 아일랜드는 최적화되어 빠르게 로드되며, 종종 브라우저가 페이지를 그리기 전에 로드되기도 합니다. 그러나 아일랜드가 렌더링되는 짧은 시간 동안 사용자 정의 대체 콘텐츠를 표시하고 레이아웃 변경을 방지할 수 있습니다.

Astro의 서버 아일랜드가 이점을 제공하는 사이트의 예로 이커머스 스토어프런트가 있습니다. 제품 페이지의 주요 콘텐츠는 자주 변경되지 않지만 일반적으로 다음과 같은 몇 가지 동적 요소가 있습니다.

헤더의 사용자 아바타
제품에 대한 특별 할인 및 판매
사용자 리뷰

이러한 요소에 서버 아일랜드를 사용하면 방문자에게 페이지의 가장 중요한 부분인 제품이 즉시 표시됩니다. 개인화된 부분을 사용할 수 있을 때까지 기본 아바타, 로딩 스피너 및 스토어 공지 사항을 대체 콘텐츠로 표시할 수 있습니다.

프로젝트에서 서버 아일랜드 사용에 대해 자세히 알아보세요.

기여하기 커뮤니티 후원하기