피드로 돌아가기
Dev.toInfrastructure
원문 읽기
Cloudflare Edge 기반 Zero Budget Prerendering으로 5ms 미만 응답 속도 달성
Zero Budget SPA Prerendering: Cloudflare Workers, Puppeteer & KV Storage
AI 요약
Context
JS 기반 SPA 구조로 인한 Search Engine Bot의 렌더링 불가 문제 및 SEO 최적화 한계 발생. 고가의 서드파티 Prerendering 서비스 도입 대신 비용 효율적인 자체 인프라 구축 필요성 대두.
Technical Solution
- CDN Edge 단에서 Bot 트래픽을 즉시 가로채는 Cloudflare Workers 기반 Intercept 구조 설계
- Puppeteer를 활용한 Headless Rendering으로 정적 HTML 스냅샷 생성 및 자동화
- 전 세계 분산 저장소인 Workers KV를 활용한 렌더링 결과물 캐싱으로 Origin 서버 부하 제거
- URL Path를 KV Key로 매핑하여 O(1) 복잡도의 빠른 HTML 조회 및 응답 로직 구현
- Sitemap.xml 기반의 Batch Crawl 전략을 통한 대규모 페이지 사전 렌더링 파이프라인 구축
- Free Tier 범위 내 운영을 위한 Worker 요청 수 및 Browser Rendering 시간 최적화
Impact
- Edge Network 기반 HTML 서빙을 통해 5ms 미만의 응답 속도 확보
- 일일 100,000건의 Worker 요청 및 1GB KV 저장소 활용을 통한 제로 비용 운영
- 10분의 Browser Rendering 시간 제한 내 수백 페이지 규모의 SEO 최적화 달성
실천 포인트
1. SPA SEO 문제 해결 시 Origin 서버 수정 전 CDN Edge 단의 Prerendering 검토
2. 정적 콘텐츠 서빙을 위한 Global KV Storage 도입으로 Latency 최소화
3. Puppeteer 기반 렌더링 시 리소스 소모를 고려한 Batch Crawl 및 캐싱 전략 수립
4. Free Tier 제약 사항(요청 수, 실행 시간)에 따른 아키텍처 확장성 검증