1. React로 만든 사이트가 구글에 안 뜬다고?
React, Vue, Angular로 SPA(Single Page Application)를 만들고 배포했는데 구글에서 검색이 안 된다는 경험담이 커뮤니티에서 자주 등장합니다. 내용도 좋고 키워드도 넣었는데 색인이 안 된다는 것입니다.
이 문제의 원인이 바로 **클라이언트 사이드 렌더링(CSR)**입니다. 렌더링 방식을 이해하면 왜 이런 문제가 생기는지, 어떻게 해결할 수 있는지 알 수 있습니다.
2. 클라이언트 사이드 렌더링(CSR)이란?
**CSR(Client-Side Rendering)**은 서버가 거의 비어있는 HTML을 보내고, 브라우저가 JavaScript를 실행해 화면을 그리는 방식입니다.
서버에서 받는 HTML은 대략 이런 형태입니다.
<!DOCTYPE html><html><head>...</head><body><div id="root"></div><script src="bundle.js"></script></body></html>
<body> 안에 실제 콘텐츠가 없습니다. 브라우저가 JavaScript 파일(bundle.js)을 내려받고 실행한 후에야 React나 Vue가 DOM을 생성해 화면에 내용을 표시합니다.
CSR의 장점은 초기 로딩 후 페이지 간 이동이 빠르고, 서버 부하가 적습니다. 사용자 상호작용이 많은 앱(관리자 대시보드, 웹 앱 등)에 적합합니다.
3. 서버 사이드 렌더링(SSR)이란?
**SSR(Server-Side Rendering)**은 사용자가 페이지를 요청하면 서버가 완성된 HTML을 생성해서 보내주는 방식입니다.
서버에서 받는 HTML에는 이미 실제 콘텐츠가 포함되어 있습니다.
<!DOCTYPE html>
<html>
<body>
<h1>블로그 제목</h1>
<p>첫 번째 문단의 내용이 여기 있습니다...</p>
</body>
</html>브라우저는 이 HTML을 받으면 JavaScript 실행 전에도 내용을 화면에 표시할 수 있습니다.
SSR의 장점은 첫 화면이 빠르게 표시되고, 검색 엔진이 콘텐츠를 쉽게 읽을 수 있습니다. 단점은 페이지마다 서버에서 HTML을 생성해야 해서 서버 부하가 있습니다.
4. CSR vs SSR – SEO 관점에서 무엇이 다른가?
구글봇은 웹 페이지를 크롤링할 때 HTML을 읽어 내용을 색인합니다.
CSR의 SEO 문제 구글봇이 CSR 페이지를 방문하면 처음에는 빈 HTML만 받습니다. 구글봇은 JavaScript를 실행해 렌더링된 결과를 보려 하지만, 이 과정에 시간이 걸리고 리소스가 필요합니다. 구글봇의 크롤링 예산이 한정되어 있어 모든 페이지의 JS를 실행하지 못할 수도 있습니다.
결과적으로 CSR 사이트는 색인이 늦거나 일부 페이지가 색인되지 않는 문제가 생길 수 있습니다.
SSR의 SEO 이점 구글봇이 SSR 페이지를 방문하면 완성된 HTML을 받습니다. 추가적인 JS 실행 없이도 콘텐츠를 즉시 읽고 색인할 수 있습니다. 색인 속도가 빠르고 안정적입니다.
| 구분 | CSR | SSR |
|---|---|---|
| 첫 화면 로딩 | 느림 (JS 실행 필요) | 빠름 (HTML 즉시 표시) |
| SEO | 불리 | 유리 |
| 서버 부하 | 낮음 | 높음 |
| 페이지 이동 속도 | 빠름 | 상대적으로 느림 |
| 적합한 서비스 | 웹 앱, 대시보드 | 블로그, 쇼핑몰, 뉴스 |
5. 정적 사이트 생성(SSG) – 두 방식의 장점을 합친 방법
**SSG(Static Site Generation)**는 빌드 시점에 모든 페이지의 HTML을 미리 생성해두는 방식입니다.
SSR처럼 완성된 HTML을 제공하므로 SEO에 유리합니다. 서버가 HTML을 실시간으로 생성할 필요가 없어 서버 부하도 없습니다. 미리 생성된 HTML을 CDN에 올리면 어디서나 빠르게 제공됩니다.
단점은 콘텐츠가 변경되면 다시 빌드해야 한다는 점입니다. 자주 바뀌지 않는 블로그 글이나 문서 사이트에 가장 적합합니다.
Gatsby, Hugo, Jekyll, Astro 같은 도구가 SSG를 지원합니다.
6. 하이브리드 렌더링 – Next.js가 하는 일
Next.js는 React 기반의 프레임워크로 CSR, SSR, SSG를 페이지별로 선택할 수 있습니다.
블로그 목록 페이지는 SSG로, 사용자 대시보드는 CSR로, 실시간 데이터가 필요한 페이지는 SSR로 구성하는 식입니다.
Next.js가 React SPA의 SEO 문제를 해결하는 가장 현실적인 방법으로 각광받는 이유가 여기에 있습니다. Next.js 외에 Vue 기반의 Nuxt.js, SvelteKit 등도 유사한 하이브리드 렌더링을 지원합니다.
7. 어떤 방식을 선택해야 하는가?
SEO가 중요하고 콘텐츠가 자주 바뀌지 않는 경우: SSG가 최적입니다. 블로그, 포트폴리오, 문서 사이트에 추천합니다.
SEO가 중요하고 콘텐츠가 실시간으로 바뀌는 경우: SSR 또는 Next.js의 ISR(증분 정적 재생성)을 사용합니다. 뉴스 사이트, 쇼핑몰에 적합합니다.
SEO가 필요 없고 사용자 상호작용이 많은 경우: CSR이 적합합니다. 로그인이 필요한 관리자 대시보드, SaaS 앱에 추천합니다.
티스토리와 워드프레스는 기본적으로 SSR 방식으로 동작합니다. 구글이 콘텐츠를 쉽게 읽을 수 있어 블로그에 적합합니다.
8. 정리
오늘 배운 핵심을 정리합니다.
- CSR은 브라우저에서 JavaScript로 화면을 그리는 방식으로 SEO에 불리합니다.
- SSR은 서버가 완성된 HTML을 보내는 방식으로 SEO에 유리합니다.
- SSG는 빌드 시 HTML을 미리 생성해 성능과 SEO 두 가지를 모두 잡습니다.
- Next.js는 페이지별로 렌더링 방식을 선택할 수 있는 하이브리드 접근을 지원합니다.