Client JS 0%, FCP 0.3초 달성한 1.2만 페이지 정적 사이트 설계

How I serve 12,237 law pages in 0.3 seconds with Astro and zero client JavaScript

LyricalString2026년 4월 6일6분intermediate

AI 요약

Context

스페인 공식 관보(BOE)의 법률 데이터는 XML 형식으로 제공되어 접근성이 낮음. 기존 유료 서비스 외에 버전 관리가 가능하고 검색이 용이한 무료 오픈 소스 플랫폼의 부재. 대규모 법률 문서의 효율적인 인덱싱과 빠른 조회 성능 확보가 필요함.

BOE API의 XML 데이터를 Bun 기반 파이프라인으로 처리하여 Markdown 및 YAML frontmatter 형식의 Git 저장소로 변환
Astro의 Content Collections와 Queued Rendering을 활용해 12,000개 이상의 페이지를 정적 HTML로 사전 생성하는 SSG 전략 채택
검색 성능 최적화를 위해 SQLite FTS5 확장 모듈을 도입하고 제목과 본문 가중치를 차등 적용한 2-Pass 쿼리 방식 구현
1970년 이전 법률의 Unix Timestamp 제약을 해결하기 위해 Git 커밋 날짜와 YAML 메타데이터를 분리하여 관리하는 커스텀 트레일러 설계
Gemini Flash를 활용해 15개 이상의 카테고리가 혼재된 'Omnibus Law'를 탐지하고 숨겨진 의제를 추출하는 AI 파이프라인 구축
Cloudflare Pages와 CDN을 통해 클라이언트 측 JavaScript 실행 및 Hydration 과정을 완전히 제거한 Zero-JS 아키텍처 구현

데이터의 성격에 따라 Git(버전 관리), SQLite(빠른 검색), Static HTML(최고의 조회 성능)로 저장소를 분리하여 각 레이어의 강점만 활용하는 다층적 데이터 전략의 중요성.

실천 포인트

대규모 정적 페이지 생성 시 메모리 부족(OOM) 방지를 위해 Astro의 Queued Rendering과 같은 동시성 제어 옵션을 반드시 설정할 것

태그