피드로 돌아가기
Dev.toFrontend
원문 읽기
Pagefind 도입으로 초기 로드 30KB 달성 및 인프라 비용 제로화
Static site search for Astro in 2026: why I picked Pagefind over Algolia and Lunr
AI 요약
Context
500~1,000개의 엔트리를 보유한 정적 사이트에서 검색 기능 구현 필요성 대두. Lunr.js와 같은 Client-side 라이브러리의 인덱스 크기 선형 증가로 인한 초기 페이지 로딩 속도 저하와 Algolia의 상용 플랜 비용 부담이 주요 병목 지점으로 작용.
Technical Solution
- Rust 기반의 Pagefind를 도입하여 Build-time 인덱싱 및 정적 파일 서빙 구조 설계
- Index Sharding 기법을 통한 데이터 분할 및 사용자 입력 시점에 필요한 Chunk만 Lazy Loading 하는 메커니즘 적용
- WebAssembly(WASM) 기반의 브라우저 내 쿼리 처리로 Backend API 의존성 및 Rate-limit 제거
- Cloudflare Pages의 Edge Cache를 활용하여 정적 인덱스 파일의 전송 지연 최소화
- First Build 시 발생 가능한 404 에러 방지를 위해 s.onerror 핸들러를 통한 예외 처리 로직 구현
실천 포인트
1. 정적 사이트 검색 도입 시 데이터 규모에 따른 인덱스 전송 전략(Upfront vs Chunked) 검토
2. 서드파티 스크립트 도입 시 Critical Rendering Path 영향을 최소화하기 위한 Lazy Load 적용
3. 정적 자산 배포 파이프라인의 First Build 시점과 자산 생성 시점의 불일치 가능성 고려 및 예외 처리 설계
4. Typo-tolerance 및 Query Logging 필요 여부에 따른 Managed Service와 Self-hosted 라이브러리 간 Trade-off 분석