클라이언트 렌더링 CSR
Client-Side Rendering
정의
브라우저에서 자바스크립트가 화면을 그리는 방식.
한눈에
수집기가 받은 HTML (클라이언트 렌더링)<div id="root"></div>본문 없음
→
수집기가 받은 HTML (서버 렌더링)<h1>A사 B모델</h1><p>3열 좌석…</p>본문 있음
알아둘 점
자바스크립트를 실행하지 않는 크롤러에게는 본문이 빈 껍데기로 보입니다. 공개 페이지는 서버가 완성된 HTML로 내려줘야 합니다.
예시
이해를 돕기 위한 가상의 예입니다.
- 서버 렌더링"페이지 소스 보기"에 본문 문장이 그대로 보임
- 클라이언트 렌더링소스에는 빈 <div id="root">뿐이고 본문은 스크립트가 나중에 그림
- 버튼 뒤 내용"자세히 보기"를 눌러야 열리는 사양표 — 초기 HTML에 없으면 수집기에는 없는 내용
흔한 오해
구글이 자바스크립트를 실행하니 괜찮다
모든 AI 수집기가 자바스크립트를 실행하지는 않습니다. 핵심 문장은 초기 HTML에 둡니다
이 콘솔에서
사이트 진단 화면에서 확인합니다.
GEO 가이드 · AI 크롤러 — 열 것과 닫을 것에서 실무로 이어 읽기 →
출처
최종 갱신