클라이언트 사이드 렌더링이란?

클라이언트 사이드 렌더링(CSR)은 서버가 빈 HTML 골격만 내려보내고, 브라우저가 자바스크립트를 실행해 본문·가격·FAQ 같은 콘텐츠를 채우는 렌더링 방식입니다. 사람이 보는 화면에는 문제가 없지만, 자바스크립트를 실행하지 않는 클라이언트에게는 페이지가 거의 빈 상태로 보입니다. 이 점이 AI 검색 가시성에서 중요한 분기가 됩니다.

AI 크롤러는 대부분 브라우저가 아니라 단순 HTTP 수집기입니다. 첫 응답의 HTML만 읽고, 자바스크립트를 실행하지 않으며, 렌더링을 기다리지도 재시도하지도 않습니다. 따라서 CSR로만 채워지는 본문은 GPTBot·ClaudeBot·PerplexityBot의 눈에는 존재하지 않는 콘텐츠가 됩니다.

CSR · SSR · SSG 비교

방식	본문 채우는 시점	AI 크롤러 노출
CSR (클라이언트 사이드)	브라우저가 JS 실행 후	❌ 비노출 (JS 미실행 크롤러에 빈 페이지)
SSR (서버 사이드)	서버가 요청 시 완성된 HTML 생성	✅ 첫 응답에 본문 포함
SSG (정적 생성)	빌드 시점에 HTML 미리 생성	✅ 첫 응답에 본문 포함

핵심은 핵심 본문이 첫 HTML 응답에 들어 있는가입니다. CSR이라도 SSR·SSG로 핵심 콘텐츠를 첫 응답에 포함시키면(하이브리드 렌더링) 크롤러가 읽을 수 있습니다.

AI 크롤러에 왜 문제인가

전통 SEO에서는 이 문제가 가려집니다. Googlebot은 지연 렌더링 파이프라인을 갖춰 자바스크립트를 실행하기 때문입니다(같은 인프라를 쓰는 Gemini도 마찬가지). 그러나 렌더링하는 크롤러는 사실상 Google 계열뿐이고, ChatGPT·Perplexity·Claude의 크롤러는 렌더 전 HTML만 봅니다.

결과적으로 같은 페이지가 Google 검색에는 정상 노출되면서 ChatGPT·Perplexity 답변에서는 통째로 빠지는 일이 발생합니다. SEO 순위와 AI 가시성이 갈라지는 대표적인 사각지대로, 검색 점수만으로는 발견하기 어렵습니다.

자주 묻는 질문

Q. React·Vue 같은 SPA는 무조건 불리한가요?

프레임워크 자체가 문제는 아닙니다. 같은 React라도 SSR·SSG로 핵심 본문을 첫 HTML에 담으면 크롤러가 읽을 수 있습니다. 문제는 본문 전체를 클라이언트에서만 채우는 순수 CSR 구성입니다.

Q. 내 페이지가 CSR인지 어떻게 확인하나요?

페이지에서 "소스 보기"(View Source)로 렌더 전 HTML을 확인하거나, 브라우저에서 자바스크립트를 끄고 새로고침해 봅니다. 본문이 사라지고 제목·빈 컨테이너만 남으면 AI 크롤러도 같은 화면을 봅니다.

Q. llms.txt를 추가하면 해결되나요?

해결되지 않습니다. llms.txt는 사이트 구조를 안내하는 표지일 뿐 본문을 렌더해 주지 않습니다. 본문이 첫 HTML에 없으면 크롤러가 읽을 본문 자체가 없습니다.

클라이언트 사이드 렌더링 (Client-Side Rendering, CSR)