피드로 돌아가기
Dev.toFrontend
원문 읽기
Prerendering 도입을 통한 React SPA 인덱싱 해결 및 8개 페이지 Top 10 진입
I Built a React SPA and Tried to Rank on Google. Here Are My Real Numbers After 12 Weeks.
AI 요약
Context
Client-rendered React SPA 구조로 인한 Google Crawler의 JavaScript 렌더링 한계 직면. 이로 인해 인덱싱 시 본문 내용이 누락되는 Blank Content 문제 발생 및 검색 노출 실패.
Technical Solution
- Build-time Puppeteer 스크립트를 활용한 Route별 정적 HTML 생성 및 Prerendering 구현
- User-agent 기반의 조건부 서빙을 통해 Crawler에게는 정적 HTML을, 일반 사용자에게는 SPA 경험 제공
- Render 플랫폼의 Rewrite Rules 설정을 통한 Clean URL과 물리적 HTML 파일 경로 매핑
- Sitemap, Prerender Script, Rewrite Rules의 3자 동기화 체계 구축을 통한 인덱싱 경로 확보
- Meta Framework 도입 전 단계에서 최소한의 설정으로 Search Engine Visibility 확보를 위한 Workaround 설계
Impact
- 12주간 총 806 Impressions 및 특정 롱테일 키워드 대상 8개 페이지 Google Top 10 진입
- Prerendering 적용 후 3~4주 차부터 일일 Impressions 1~13회로 증가, 최대 40회까지 스파이크 기록
- 평균 검색 순위 57위(6페이지)에서 47위(5페이지)로 개선
Key Takeaway
SEO가 필수적인 서비스의 경우 Rendering Pipeline을 초기 설계 단계부터 정의해야 하며, 단순 SPA 구조는 인덱싱 신뢰도가 낮으므로 SSR 혹은 Prerendering 전략이 필수적임.
실천 포인트
1. React SPA 기반 서비스의 Google Search Console 내 'URL 검사'를 통한 실제 렌더링 결과 확인
2. 페이지 수가 적은 경우 Build-time Prerendering 도입을 통한 빠른 인덱싱 확보 검토
3. 정적 파일 생성, 사이트맵, URL 리라이트 규칙 간의 동기화 자동화 여부 확인
4. 장기적인 확장성과 유지보수 효율을 위해 Next.js, Astro 등 Meta Framework 전환 비용 산정