아일랜드 아키텍처

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

간략한 역사

”컴포넌트 아일랜드”라는 용어는 2019년 Etsy의 프런트엔드 설계자인 Katie Sylor-Miller에 의해 처음 만들어졌습니다. 이후 이 아이디어는 2020년 8월 11일 Preact의 창시자인 Jason Miller에 의해 확장되어 이 게시물에 소개되었습니다.

”아일랜드” 아키텍처의 일반적인 아이디어는 믿을 수 없을 정도로 간단합니다. 서버에서 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 컴포넌트의 모든 클라이언트 측 JavaScript를 제거하고 HTML 및 CSS로 렌더링합니다.

<MyReactComponent />

엄격하게 들릴 수도 있지만, 이 동작은 기본적으로 Astro 웹 사이트의 속도를 빠르게 유지하며, 개발자가 실수로 불필요하거나 원치 않는 JavaScript를 전송하여 웹 사이트의 속도를 저하시키는 것을 방지합니다.

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

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

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

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

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

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

또 다른 이점은 병렬 로딩입니다. 위의 예시 그림에서 우선순위가 낮은 ‘이미지 캐러셀’ 아일랜드는 우선순위가 높은 ‘머리글’ 아일랜드를 차단할 필요가 없습니다. 둘은 병렬로 로드되고 별도로 수화됩니다. 즉, 페이지 아래에 있는 무거운 캐러셀을 기다리지 않아도 머리글은 즉시 상호작용이 가능합니다.

더 좋은 점은 Astro에게 각 컴포넌트를 렌더링하는 방법과 시기를 정확하게 알려줄 수 있다는 것입니다. 해당 이미지 캐러셀을 로드하는 데 비용이 많이 드는 경우, 페이지에 캐러셀이 표시될 때만 이를 로드하도록 지시하는 특수 클라이언트 지시어를 추가할 수 있습니다. 사용자에게 표시되지 않으면 로드되지 않습니다.

페이지의 어떤 컴포넌트가 브라우저에서 실행되어야 하는지 Astro에게 명시적으로 알려주는 것은 개발자의 몫입니다. Astro는 페이지에 필요한 것만 정확하게 수화하고 사이트의 나머지 부분은 정적 HTML로 남겨둡니다.

클라이언트 아일랜드는 Astro의 기본적으로 빠른 성능 이야기의 비밀입니다!

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

서버 아일랜드

서버 아일랜드는 비용이 많이 들거나 느린 서버 측 코드를 메인 렌더링 프로세스에서 분리하는 방법으로, 고성능 정적 HTML과 동적 서버 생성 컴포넌트를 쉽게 결합할 수 있게 해줍니다.

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

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

이는 각각 병렬로 로드되는 더 작은 영역의 서버 렌더링 콘텐츠로 페이지를 분할합니다.

페이지의 주요 콘텐츠는 아일랜드의 고유 콘텐츠가 사용 가능할 때까지 기본 아바타와 같은 플레이스홀더 콘텐츠와 함께 즉시 렌더링될 수 있습니다. 서버 아일랜드를 사용하면 개인화된 콘텐츠의 작은 컴포넌트들이 있더라도 정적 페이지의 렌더링이 지연되지 않습니다.

이 렌더링 패턴은 이식성을 고려하여 만들어졌습니다. 어떤 서버 인프라에도 의존하지 않기 때문에 Docker 컨테이너의 Node.js 서버부터 원하는 서버리스 제공업체에 이르기까지 모든 호스트에서 작동합니다.

서버 아일랜드의 이점

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

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

Astro의 서버 아일랜드의 혜택을 받는 사이트의 예시로는 이커머스 스토어프론트가 있습니다. 제품 페이지의 주요 콘텐츠는 자주 변경되지 않지만, 이러한 페이지들은 일반적으로 몇 가지 동적인 요소를 가지고 있습니다:

헤더의 사용자 아바타
제품의 특별 할인과 판매
사용자 리뷰

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

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

기여하기

커뮤니티