본문 바로가기

Frontend#Frontend#Architecture#Performance조회 115

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 전체 →

이미지 최적화

Next.js Image·WebP·AVIF·srcset·lazy·blur placeholder.

HttpOnly·Secure·SameSite·Domain·Path·Max-Age. 보안·동작 제어.

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

Analog (Angular)

Angular용 메타프레임워크. Vite·파일 라우팅·SSR.

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

Angular Signals

Angular 17+의 반응성 API. Zone.js 의존 탈피.