피드로 돌아가기
Dev.toFrontend
원문 읽기
CSR 기반 Vibe-Coding 웹사이트의 Google 인덱싱 실패와 SSR/SSG 전환을 통한 SEO 해결
Why Your Vibe-Coded Website May Never Rank on Google (2026)
AI 요약
Context
AI 도구 기반의 Vibe-coding으로 생성된 웹사이트가 대다수 Client-side Rendering(CSR) 구조의 React 앱으로 설계됨. 이로 인해 초기 HTML 응답이 빈 쉘(Empty Shell) 상태로 제공되어 Googlebot의 1차 인덱싱 단계에서 콘텐츠 누락 현상 발생.
Technical Solution
- 서버 응답 단계에서 완성된 HTML을 전달하는 Server-side Rendering(SSR) 및 Static Site Generation(SSG) 아키텍처 도입
- Next.js, Remix, Astro 등 프레임워크 전환을 통한 HTML-first 렌더링 전략 채택
- Googlebot의 2-wave indexing 프로세스 중 지연 시간이 긴 2차 렌더링 단계에 의존하지 않는 구조 설계
- 기존 CSR 앱에 Prerendering 설정을 추가하여 크롤러 전용 정적 HTML 스냅샷 제공
- AI 프롬프트를 통한 'Initial HTML 콘텐츠 포함' 요청으로 렌더링 전략의 명시적 변경 유도
실천 포인트
- Google Search Console의 'URL 검사' 기능을 통해 크롤러가 수신하는 실제 HTML 소스 확인 - 초기 렌더링 시 <div id="root"></div> 외에 실제 텍스트 콘텐츠가 포함되어 있는지 검증 - SEO가 필수적인 프로젝트의 경우 React 단일 앱 구조 대신 Next.js(SSR/SSG) 또는 Astro(Static-first) 고려 - AI 생성 코드의 경우 'Search Engine Indexing'을 위한 렌더링 전략이 반영되었는지 설계 단계에서 검토