SSR vs CSR SEO 검색 인식 실험
CSR(Client-Side Rendering)과 SSR(Server-Side Rendering)과 검색어 인식(SEO)과의 그대 차이를, 직접 Tiny 웹 서버로 실험해보며 확인했습니다.
클리언스 사이드 테스트
실험 방식
- SSR 방식의
/ssr_hello는 서버가 HTML을 직접 만들어서 보냄 - CSR 방식의
/hello.html은 브라우저가 JavaScript로 DOM을 구성함 curl명령어를 통해 검색엔진이 보는 "초기 응답 HTML"을 비교함
변경 사항 (코드 구현)
--
실험 결과
SSR (/ssr_hello)
curl http://localhost:8000/ssr_hello응답 결과:
✅ 검색엔진은 콘텐츠를 그대로 읽을 수 있음
CSR (/hello.html)
curl http://localhost:8000/hello.html응답 결과:
<html><head><script src="hello.js"></script></head>
<body>
<h1>Hello CSR</h1>
<div id="content"></div>
</body></html>❌ 검색엔진은 JS를 실행하지 않기 때문에 <div> 안의 실제 내용은 인식할 수 없음
결론
| 항목 | SSR | CSR |
|---|---|---|
| HTML에 콘텐츠 포함 | ✅ 있음 | ❌ 없음 (JS 필요) |
| curl로 본문 확인 가능 | ✅ 가능 | ❌ 불가능 |
| JS 비활성 상태에서 표시 | ✅ 표시됨 | ❌ 안 보임 |
| 검색엔진 인식 가능성 | ✅ 높음 | ❌ 매우 낮음 |
요약
- SSR은 서버가 HTML을 미리 조립해 보내므로, 검색엔진이 내용을 쉽게 인식 가능함
- CSR은 브라우저가 JS 실행 후 렌더링하므로, 검색엔진은 내용을 못 보거나 일부만 인식함
- SEO가 중요한 웹페이지라면 SSR 방식이 훨씬 유리함
이 실험을 통해 단순 이론이 아닌 실제 HTML 응답 결과로 SSR의 SEO 우수성을 확인할 수 있었습니다.
공부 내용을 가볍게 적어놓는 블로그.