Astro 아일랜드

Astro는 아일랜드라는 프런트엔드 아키텍처를 개척하고 대중화했습니다. 아일랜드 아키텍처는 모놀리식 JavaScript 패턴을 피하고 페이지에서 필수적이지 않은 모든 JavaScript를 자동으로 제거하는 데 도움을 줌으로써 더 나은 프런트엔드 성능을 제공합니다. 개발자는 Astro에서 선호하는 UI 컴포넌트와 프레임워크를 계속 사용하면서 이러한 이점을 얻을 수 있습니다.

간략한 역사

“컴포넌트 아일랜드”라는 용어는 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 웹 프레임워크로 인기를 얻었습니다.

아일랜드란?

Astro에서 “아일랜드”는 페이지의 대화형 UI 컴포넌트를 의미합니다. 아일랜드를 서버 측에서 렌더링된 정적이고 가벼운 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 성능의 비결입니다!

GitHub Issue 생성

의견 보내기