구조·마크업 · 공식 문서
SSR CSR SSG SEO 차이와 사이트별 선택 기준
차이는 크롤러가 받는 첫 HTML에 본문이 있느냐입니다. SSR·SSG는 첫 HTML에 본문이 있고 CSR은 렌더링 뒤에 생기므로, 검색에 나올 공개 페이지는 SSG나 SSR로, 로그인 뒤 화면은 CSR로 나눠 고릅니다.
렌더링 방식은 페이지 HTML을 어디서, 언제 만드느냐의 선택입니다. 서버에서 요청마다 만들 수도, 빌드할 때 미리 만들 수도, 브라우저가 자바스크립트로 만들 수도 있습니다.
검색에서 갈리는 지점은 하나입니다. 크롤러가 받은 첫 HTML에 본문과 링크가 들어 있느냐입니다.
발견 01
렌더링 방식 5가지 중 4가지는 첫 HTML에 본문이 있고, CSR만 렌더링 뒤에 생깁니다
| 방식 | HTML을 만드는 때 | 첫 HTML에 본문 | 용어 정의 원문 |
|---|---|---|---|
| 서버 측 렌더링(SSR) | 요청이 올 때마다 서버에서 | 있음 | Rendering an app on the server to send HTML, rather than JavaScript, to the client.앱을 서버에서 렌더링해 자바스크립트가 아니라 HTML을 클라이언트에 보내는 것. |
| 정적 렌더링(SSG) | 빌드할 때 URL마다 미리 | 있음 | Static rendering happens at build time. Generally, static rendering means producing a separate HTML file for each URL ahead of time.정적 렌더링은 빌드할 때 일어난다. 보통 URL마다 HTML 파일을 미리 따로 만든다는 뜻이다. |
| 사전 렌더링 | 빌드할 때 앱의 첫 상태를 HTML로 | 있음 | Running a client-side application at build time to capture its initial state as static HTML.클라이언트 측 앱을 빌드할 때 실행해 첫 상태를 정적 HTML로 담아 두는 것. |
| 하이드레이션 | 서버 HTML 위에서 브라우저가 이어서 | 있음 | Running client-side scripts to add application state and interactivity to server-rendered HTML.서버에서 렌더링한 HTML에 클라이언트 스크립트를 실행해 앱 상태와 상호작용을 더하는 것. |
| 클라이언트 측 렌더링(CSR) | 브라우저가 자바스크립트로 | 없음(틀만 있음) | Rendering an app in a browser, using JavaScript to modify the DOM.브라우저에서 자바스크립트로 DOM을 바꿔 앱을 렌더링하는 것. |
Instead, we recommend that you use server-side rendering, static rendering, or hydration as a solution.
대신 서버 측 렌더링, 정적 렌더링, 하이드레이션을 해법으로 쓰기를 권한다.
구글 검색 센터가 권하는 세 방식은 모두 첫 HTML에 본문을 담습니다. 구글은 CSR 페이지도 렌더링해 읽지만, 렌더링 대기열을 한 번 더 거칩니다.
구글과 네이버가 자바스크립트를 처리하는 단계는 「자바스크립트 SEO」 편에 자세히 적었습니다.
Client-side rendering can work, but often needs additional testing and overhead.
클라이언트 측 렌더링도 될 수는 있지만, 추가 테스트와 부담이 따르는 경우가 많다.
발견 02
방식은 선택 기준 6가지를 위에서부터 차례로 물어 고릅니다
| 순서 | 물을 것 | 고르는 방식 | 공식 문서 원문 |
|---|---|---|---|
| 1 | 검색에 나와야 하는 공개 페이지인가 | 아니면(로그인 뒤 화면·관리 화면) 클라이언트 측 렌더링이어도 됩니다. 맞으면 다음 질문으로 갑니다. | Client-side rendering can work, but often needs additional testing and overhead.클라이언트 측 렌더링도 될 수는 있지만, 추가 테스트와 부담이 따르는 경우가 많다. |
| 2 | 내용이 드물게 바뀌고 URL을 미리 셀 수 있는가 | 정적 렌더링을 고릅니다. 회사 소개·서비스 소개·글 페이지가 여기에 듭니다. | One of the downsides to static rendering is that it must generate individual HTML files for every possible URL. This can be challenging or even infeasible when you need to predict those URLs ahead of time and for sites with a large number of unique pages.정적 렌더링의 단점은 가능한 모든 URL마다 HTML 파일을 만들어야 한다는 것이다. URL을 미리 알기 어렵거나 고유 페이지가 아주 많은 사이트에서는 어렵거나 불가능할 수 있다. |
| 3 | 요청마다 실시간 데이터나 사람별 내용이 필요한가 | 서버 측 렌더링을 고릅니다. 재고·가격이 자주 바뀌는 상세 페이지가 여기에 듭니다. | The upside to server-side rendering is the ability to pull more "live" data and respond to a more complete set of requests than is possible with static rendering. Pages that need personalization are a concrete example of the type of request that doesn't work well with static rendering.서버 측 렌더링의 장점은 정적 렌더링보다 실시간 데이터를 더 많이 가져오고 더 다양한 요청에 응답할 수 있다는 것이다. 사람별 내용이 필요한 페이지는 정적 렌더링과 잘 맞지 않는 요청의 예다. |
| 4 | 상호작용이 거의 없는 페이지인가 | 서버 측 렌더링이나 정적 렌더링만으로 충분합니다. 하이드레이션할 자바스크립트를 줄입니다. | For experiences with little or no interactivity, server-side rendering can represent a more scalable solution to these issues.상호작용이 거의 없는 화면이라면 서버 측 렌더링이 이런 문제에 더 확장성 있는 해법일 수 있다. |
| 5 | 페이지마다 성격이 다른가 | 한 사이트 안에서 페이지 종류별로 방식을 나눕니다. | There's a long-standing debate over the correct applications of server-side rendering versus client-side rendering, but you can always choose to use server-side rendering for some pages and not others.서버 측 렌더링과 클라이언트 측 렌더링을 어디에 쓸지는 오래된 논쟁이지만, 일부 페이지만 서버 측 렌더링으로 고를 수도 있다. |
| 6 | 네이버 검색도 대상인가 | SPA 구조여도 주요 영역은 서버 렌더링으로 첫 HTML에 담습니다. | 그러므로 SPA 사이트라도 HTML의 주요 영역 생성은 검색로봇이 잘 인식할 수 있도록 서버에서 렌더링 (Server Side Rendering)을 처리하는 것을 권장합니다. |
첫 질문에서 검색 대상이 아닌 화면을 먼저 덜어 냅니다. 로그인 뒤 화면은 크롤러가 들어갈 수 없어, 서버 렌더링으로 옮겨도 검색에서 달라지는 것이 적습니다.
정적 렌더링은 URL마다 파일을 미리 만들어야 하므로, 상품 수만큼 URL이 계속 늘어나는 페이지에는 서버 측 렌더링이 맞습니다.
발견 03
한 사이트 안에서도 페이지 종류마다 방식을 나눌 수 있고, 스트리밍 SSR도 확인 기준은 같습니다
There's a long-standing debate over the correct applications of server-side rendering versus client-side rendering, but you can always choose to use server-side rendering for some pages and not others.
서버 측 렌더링과 클라이언트 측 렌더링을 어디에 쓸지는 오래된 논쟁이지만, 일부 페이지만 서버 측 렌더링으로 고를 수도 있다.
소개 페이지는 정적 렌더링, 상품 상세는 서버 측 렌더링, 장바구니는 클라이언트 측 렌더링처럼 나누는 구성이 가능합니다. 기준은 페이지마다 검색에 나와야 하느냐입니다.
스트리밍 SSR은 HTML을 조각으로 나눠 보내는 방식입니다. 이 편이 읽은 구글 검색 센터 문서에는 스트리밍을 따로 다룬 문장이 없어, 확인은 URL 검사의 렌더링된 HTML로 합니다.
Streaming server-side rendering lets you send HTML in chunks that the browser can progressively render as it's received.
스트리밍 서버 측 렌더링은 HTML을 조각으로 보내고, 브라우저는 받는 대로 차례로 그린다.
발견 04
같은 기준이라도 B2B·B2C·B2G 는 고르는 방식이 다릅니다
예시 ① 문의형 기업 사이트(B2B)
회사 소개·서비스 소개·사례 글이 대부분이고 내용이 드물게 바뀝니다. 두 번째 질문에서 정적 렌더링으로 정해집니다.
문의 폼처럼 상호작용이 있는 부분만 브라우저 스크립트로 붙입니다.
예시 ② 상품 수가 수천 개인 쇼핑몰(B2C)
상품 상세는 재고·가격이 자주 바뀌어 서버 측 렌더링, 브랜드 소개와 안내 페이지는 정적 렌더링으로 나눕니다.
장바구니·주문 내역은 검색 대상이 아니라 클라이언트 측 렌더링으로 둡니다.
예시 ③ 공지·민원 안내가 많은 공공기관 누리집(B2G)
공지 글은 매일 늘고 네이버 검색도 대상이라, 게시판 목록과 글은 서버 측 렌더링으로 첫 HTML에 담습니다.
민원 신청처럼 로그인이 필요한 화면은 클라이언트 측 렌더링이어도 됩니다.
그럼 우리 사이트는 어떤 순서로 방식을 정하나요?
- 사이트의 페이지를 종류별로 나눠 적습니다(소개·상세·목록·글·로그인 뒤 화면).
- 종류마다 위 선택 기준 6가지를 순서대로 물어 방식을 하나씩 정합니다.
- 지금 쓰는 방식은 view-source: 로 첫 HTML에 본문이 있는지 보고 확인합니다.
- 바꾸기로 한 페이지는 공개 뒤 서치 콘솔 URL 검사의 렌더링된 HTML로 본문과 링크를 확인합니다.
- 옮기기 전까지 동적 렌더링을 쓸지는 「동적 렌더링 뜻」 편의 판단 기준을 봅니다.
조사 방법
- web.dev (Google Chrome) 「Rendering on the Web」 (문서 수정일 2026-01-05) · 최종 확인일 2026-10-25 · https://web.dev/articles/rendering-on-the-web
- Google Search Central 「Dynamic rendering as a workaround」 (문서 수정일 2025-12-10) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/javascript/dynamic-rendering
- Google Search Central 「Understand the JavaScript SEO basics」 (문서 수정일 2026-03-04) · 최종 확인일 2026-10-25 · https://developers.google.com/search/docs/crawling-indexing/javascript/javascript-seo-basics
- 네이버 서치어드바이저 「자바스크립트 검색 최적화」 · 최종 확인일 2026-10-25 · https://searchadvisor.naver.com/guide/seo-advanced-javascript
- 렌더링 방식 5가지와 선택 기준 6가지는 위 문서들의 정의와 권고를 선택 순서로 묶은 것입니다. 묶는 방식과 「고르는 방식」 칸은 편집 판단입니다.
- 예시 ①②③은 이해를 돕기 위해 만든 가상 상황이며, 실제 기업·기관의 사례가 아닙니다.
- 원문은 영어판(hl=en)이고, 도구·보고서 이름은 같은 문서 한국어판(hl=ko) 표기를 따랐습니다.