대규모 단일 페이지 애플리케이션(SPA) 프레임워크는 인터랙티브 UI를 손쉽게 구축할 수 있도록 도왔지만, 콘텐츠 중심 웹사이트에서는 불필요한 자바스크립트 전송과 브라우저 메인 스레드 부담을 가져오기도 했습니다.

아일랜드 아키텍처(Islands Architecture)는 페이지의 대다수를 순수 정적 HTML로 구성하고, 사용자 입력이나 동적 처리가 필요한 컴포넌트만 독립적인 자바스크립트 모듈로 격리하는 설계 접근법입니다.

1. 선택적 수화(Selective Hydration) 방식

기존 SSR이 전체 화면 트리를 한 번에 복원하려 했다면, 아일랜드 모델은 컴포넌트 단위로 격리합니다:

  • 정적 본문, 네비게이션 구조, 공통 레이아웃은 자바스크립트 번들 없이 HTML로 전송됩니다.
  • 검색창이나 테마 전환기 등 상호작용 컴포넌트만 별도의 스크립트를 로드합니다.
  • 불필요한 번들 다운로드가 줄어들지만, 여러 아일랜드 간에 공통 상태를 공유해야 할 때는 별도의 상태 버스나 이벤트 채널을 설계해야 합니다.

2. 정적 사이트 생성(SSG)과의 결합

Astro와 같은 정적 빌드 도구와 결합할 때, 아일랜드 방식은 초기 로딩 지연을 줄이는 데 도움을 줍니다. 다만 실제 성능과 코어 웹 바이탈 지표는 정적 비중, 이미지 크기, 서드파티 스크립트 존재 여부에 따라 종합적으로 결정됩니다.