본문 바로가기

Frontend#Frontend#Architecture#Performance조회 1

Islands Architecture란?

정의

정적 HTML 바다에 필요한 인터랙티브 컴포넌트("섬")만 부분 hydration하는 렌더 모델. Astro가 대표.

다른 표현Islands 아키텍처섬 아키텍처

Islands Architecture란?

전통적 SPA는 페이지 전체를 hydration한다. Islands는 정적 HTML이 기본이고, 필요한 컴포넌트만 독립적으로 hydration한다.

이점

JS 번들 급감 — 대부분 페이지는 0 JS
FCP·LCP 극적 개선
섬마다 다른 프레임워크 혼용 가능 (React + Vue + Svelte)

대표 구현

Astro — 원조, client:load 등 directive
Fresh — Deno 기반
Qwik — Resumability로 한 발 더 진화

React의 대응

React Server Components + 'use client' 경계가 비슷한 아이디어다.

🔗 함께 보면 좋은 용어

Frontend 전체 →

웹 접근성. 장애인·모든 사용자가 쓸 수 있게 하는 실천. WCAG 표준.

Google의 엔터프라이즈 프런트엔드 프레임워크. TypeScript 1급. RxJS·DI 기반.

Accessible Rich Internet Applications

HTML 네이티브로 표현 어려운 의미를 속성으로 보강하는 W3C 표준.

요소의 가로/세로 비율을 CSS로 직접 지정하는 속성. 이미지·영상 로드 전 공간 예약.

콘텐츠 중심 사이트에 최적화된 프레임워크. "Islands Architecture"로 기본 0 JS, 필요한 곳만 hydration.

Node·브라우저용 HTTP 클라이언트. fetch 이전 표준. 인터셉터·변환 기능 풍부.