Astro Island Architecture 기반 JS 번들 80% 감소 및 LCP 1.5s 달성

Context

기존 브라우저 기반 개발 도구들이 서버로 데이터를 전송하는 보안 취약점과 무거운 SPA 런타임으로 인한 성능 저하 문제를 보유함. 특히 Next.js와 같은 프레임워크는 정적 페이지에서도 불필요한 JS 번들을 전송하여 초기 로딩 속도를 저하시키는 한계를 보임.

Technical Solution

• Astro의 Island Architecture를 도입하여 정적 HTML 쉘과 독립적인 React 컴포넌트 분리 구조 설계
• client:visible 지시어를 통한 지연 하이드레이션(Lazy Hydration) 구현으로 초기 JS 실행 부하 제거
• Web Crypto API 등 브라우저 네이티브 API를 활용한 Client-side 데이터 처리로 서버 전송 제로화
• CORS 제한이 있는 외부 API 접근을 위해 Cloudflare Pages Function을 Thin Proxy로 활용한 네트워크 경로 최적화
• localStorage 기반의 useHistory 커스텀 훅을 설계하여 상태 유지 및 사용자 경험 개선
• Hash-based State 관리 방식을 적용한 도구별 공유 가능 URL 구조 설계

Impact

• JS 번들 크기 감소: 200KB+ → 40KB (약 80% 절감)
• 성능 지표 개선: 모바일 4G 환경 LCP 1.5초 미만 달성
• Lighthouse Performance 점수: 모바일 기준 95점 이상 확보

Key Takeaway

상호작용이 적은 도구형 웹사이트에서는 전면적인 SPA 도입보다 정적 HTML과 부분적 하이드레이션을 결합한 아키텍처가 성능과 보안 면에서 압도적으로 유리함.