아일랜드 아키텍처(Islands Architecture)는 정적 HTML 페이지에서 인터랙티브한 컴포넌트(아일랜드)만 선택적으로 하이드레이션하는 패턴이다. 전체 페이지 하이드레이션의 JS 비용을 줄인다.
전통 SSR vs 아일랜드 아키텍처
전통 SSR + 클라이언트 하이드레이션:
서버: 전체 HTML 렌더링
클라이언트: 전체 React 앱 다운로드 + 파싱 + 하이드레이션
문제: 정적 콘텐츠(헤더, 텍스트)도 JS 필요
아일랜드 아키텍처:
서버: 전체 HTML 렌더링 (정적 부분 포함)
클라이언트: 인터랙티브한 '아일랜드'만 하이드레이션
효과:
- 초기 JS 번들 크기 대폭 감소
- 정적 영역은 HTML만으로 렌더링
- 중요 아일랜드 우선 처리 가능
Astro (아일랜드 아키텍처 대표 프레임워크)
astro
---
// src/pages/index.astro
import Header from '../components/Header.astro'; // 정적 컴포넌트
import Hero from '../components/Hero.astro'; // 정적 컴포넌트
import Counter from '../components/Counter.jsx'; // 인터랙티브 컴포넌트
import Comments from '../components/Comments.vue'; // Vue 컴포넌트
---
<html>
<body>
<Header /> <!-- JS 없음, 순수 HTML -->
<Hero /> <!-- JS 없음 -->
<!-- client:load: 즉시 하이드레이션 -->
<Counter client:load />
<!-- client:idle: 브라우저 유휴 시 하이드레이션 -->
<Counter client:idle />
<!-- client:visible: 뷰포트에 들어올 때 -->
<Comments client:visible />
<!-- client:media: 미디어 쿼리 만족 시 -->
<Sidebar client:media="(min-width: 768px)" />
<!-- client:only: SSR 없이 클라이언트만 -->
<Map client:only="react" />
</body>
</html>
관련 프레임워크
| 프레임워크 | 방식 | 특징 |
|---|
| Astro | 명시적 client:* 지시어 | 다중 프레임워크 지원 |
| Fresh (Deno) | islands/ 폴더 컨벤션 | Preact 기반 |
| Elder.js | 수동 설정 | Svelte 기반 |
| Marko | 자동 감지 | 컴파일러가 자동 분리 |
관련 문서
