피드로 돌아가기
Dev.toFrontend
원문 읽기
Islands Architecture 도입으로 JS 0B 및 LCP 400ms 달성
Astro and Islands Architecture: Why Your Portfolio Doesn't Need React for Everything
AI 요약
Context
전통적인 SPA 프레임워크의 과도한 Client-side JavaScript 번들링으로 인한 초기 로딩 성능 저하 발생. 단순 문서 중심의 웹사이트에서도 전체 애플리케이션 런타임을 로드해야 하는 Over-engineering 구조의 한계 노출.
Technical Solution
- HTML-First 철학 기반의 Build-time 컴파일을 통한 정적 HTML 기본 출력 구조 설계
- Islands Architecture 도입으로 정적 페이지 내 독립적 상호작용 컴포넌트만 부분 Hydration 수행
- client:load, client:visible 등 5가지 Hydration Directives를 통한 JS 실행 시점의 정밀 제어
- Framework Agnostic 설계를 통한 React, Svelte 등 복수 프레임워크의 선택적 병행 운용
- Zod 기반 Content Collections 구축으로 Markdown 데이터의 Build-time Type Validation 강제
- astro:assets를 활용한 자동 이미지 최적화 및 WebP/AVIF 포맷 변환으로 Layout Shift 방지
실천 포인트
1. 정적 콘텐츠 비중이 높은 페이지는 SPA 대신 HTML-First 아키텍처 검토
2. 상호작용 컴포넌트 배치 시 Viewport 진입 시점에 맞춘 client:visible 전략 적용
3. 다수의 프레임워크 혼용 시 런타임 크기(React 45KB vs Svelte 2KB)를 고려한 컴포넌트 선택
4. SSR 단계에서 browser API 참조로 인한 빌드 오류 방지를 위해 client:only 사용 주의