Astro 아일랜드

Astro 아일랜드(일명 컴포넌트 아일랜드)는 Astro가 개척한 웹 아키텍처 패턴입니다. ‘아일랜드 아키텍처’라는 아이디어는 2019년 Etsy의 프런트엔드 아키텍트인 Katie Sylor-Miller에 의해 처음 만들어졌으며 Preact 창시자인 Jason Miller가 이 게시물에서 확장했습니다.

Astro 아일랜드란?

‘Astro 아일랜드’라는 용어는 HTML의 정적인 페이지에 있는 대화형 UI 컴포넌트를 나타냅니다. 한 페이지에 여러 아일랜드가 있을 수 있으며, 아일랜드는 항상 분리되어 렌더링됩니다. HTML이라는 정적이고 비대화형인 바다에 떠 있는 섬(아일랜드)이라고 생각하세요.

머리글 (대화형 아일랜드)

사이드바 (정적 HTML)

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

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

바닥글 (정적 HTML)

출처: Islands Architecture: Jason Miller

Astro에서 지원되는 모든 UI 프레임워크(React, Svelte, Vue 등)를 사용하여 브라우저에서 아일랜드를 렌더링할 수 있습니다. 동일한 페이지에서 다양한 프레임워크를 혼합하여 일치시키거나 선호하는 프레임워크를 선택할 수 있습니다.

이 아키텍처 패턴의 기반이 되는 기술은 부분적(partial) 또는 선택적 수화(selective hydration) 라고 알려져 있습니다. Astro는 이 기술을 활용하여 아일랜드에 상호작용을 추가합니다.

Astro에서 아일랜드는 어떻게 작동하나요?

Astro는 기본적으로 클라이언트 측 JavaScript가 전혀 없는 웹사이트를 생성합니다. React, Preact, Svelte, Vue, SolidJS, AlpineJS, Lit로 구축된 프론트엔드 UI 컴포넌트를 사용하면 Astro는 미리 HTML로 렌더링하고 모든 JavaScript를 제거합니다. 이렇게 하면 기본적으로 페이지에서 사용되지 않는 JavaScript를 모두 제거하여 모든 사이트의 속도를 빠르게 유지할 수 있습니다.

src/pages/index.astro

---
// 예: JavaScript 없이 페이지에서 정적 React 컴포넌트를 사용합니다.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 100%의 HTML 및 0%의 JavaScript가 페이지에 로드되었습니다! -->
<MyReactComponent />

그러나 대화형 UI를 생성하려면 클라이언트 측 JavaScript가 필요한 경우가 있습니다. 전체 페이지를 단일 페이지 JavaScript 애플리케이션(SPA)으로 만드는 대신 Astro는 여러분에게 아일랜드를 만들도록 요청합니다.

src/pages/index.astro

---
// 예: 페이지에서 동적 React 컴포넌트를 사용합니다.
import MyReactComponent from '../components/MyReactComponent.jsx';
---
<!-- 이제 이 컴포넌트는 페이지에서 상호작용할 수 있습니다!
     웹사이트의 나머지 부분은 JS 없이 정적으로 유지됩니다. -->
<MyReactComponent client:load />

Astro 아일랜드를 사용하면 사이트의 대부분이 순수하고 가벼운 HTML 및 CSS로 유지됩니다. 위의 예시에서는 페이지의 나머지 부분을 변경하지 않고 분리된 단일 대화형 아일랜드를 추가했습니다.

아일랜드의 장점은 무엇인가요?

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

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

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

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

아일랜드는 Astro의 기본적으로 뛰어난 성능의 비결입니다!