피드로 돌아가기
Dev.toFrontend
원문 읽기
JS 312KB에서 48KB로 감축, TTI 0.4s 달성한 Astro 기반 포트폴리오 전환
Why I Rebuilt My Portfolio with Astro
AI 요약
Context
콘텐츠 중심 사이트임에도 React 기반 SPA 구조를 채택하여 불필요한 JavaScript 런타임이 과도하게 전송되는 오버헤드 발생. Lighthouse 성능 지표 저하 및 런타임 무거움으로 인한 사용자 경험 저하 문제 직면.
Technical Solution
- Build time에 정적 HTML을 생성하여 브라우저 전송 JS를 최소화하는 'Zero JS' 전략 채택
- 필요한 부분에만 선택적으로 JS를 주입하는 Astro Islands 아키텍처 도입
client:visible,client:idle등 Directives를 통한 컴포넌트 Hydration 시점의 세밀한 제어- 정적 콘텐츠는 Astro 컴포넌트로 처리하고 상호작용이 필요한 섹션만 React를 사용하는 하이브리드 프레임워크 구성
- Content Collections API와 zod 스키마를 통한 타입 안전한 MDX 콘텐츠 관리 체계 구축
Impact
- Total JS shipped: 312 KB → 48 KB로 감소
- Time to Interactive (TTI): 1.8s → 0.4s로 단축 (Throttled connection 기준)
- Lighthouse Performance Score: 71 → 97로 상승
실천 포인트
1. 콘텐츠 비중이 높은 사이트 설계 시 SPA 대신 Static HTML 중심의 아키텍처 검토
2. 모든 컴포넌트를 Hydrate 하지 않고 뷰포트 진입 시점에 맞춘 Lazy Hydration 적용
3. 프레임워크 종속성을 탈피하여 컴포넌트 단위로 최적의 라이브러리를 선택하는 전략 고려
4. MDX 등 마크다운 기반 콘텐츠 사용 시 스키마 검증을 통한 데이터 무결성 확보