웹개발실무
렌더링 방식 (SSR·CSR·SSG)Rendering: SSR · CSR · SSG
DEFINITION
렌더링 방식은 웹페이지의 HTML을 서버에서 미리 만들어 보낼지(SSR·SSG), 브라우저가 자바스크립트로 직접 그릴지(CSR)를 정하는 구조이며, 검색엔진이 처음 받는 HTML의 내용이 여기서 결정됩니다.
- SEO에 유리
- SSR · SSG (HTML에 본문 포함)
- 주의 필요
- CSR (빈 HTML + JS)
- Google 렌더링
- 최신 Chromium으로 JS 실행
01같은 화면도 HTML이 만들어지는 곳은 다르다
| 방식 | HTML을 만드는 곳 | 첫 응답에 본문이 있나 | 어울리는 페이지 |
|---|---|---|---|
| SSG 정적 생성 | 배포할 때 미리 | 있음 | 회사 소개, 서비스, 블로그 |
| SSR 서버 렌더링 | 요청마다 서버에서 | 있음 | 자주 바뀌는 목록, 개인화 일부 |
| CSR 클라이언트 렌더링 | 브라우저(JS 실행 후) | 없음 (빈 틀) | 로그인 후 관리 화면 |
02검색엔진이 처음 받는 HTML이 중요한 이유
Google은 자바스크립트를 실행해 페이지를 렌더링할 수 있지만, 크롤링 → 렌더링 → 인덱싱 순서로 처리하며 렌더링은 대기열을 거칠 수 있습니다. 반면 Bing 등 다른 검색엔진과 상당수 AI 크롤러는 자바스크립트를 충분히 실행하지 않는 것으로 알려져 있습니다. 첫 응답 HTML에 본문과 링크가 들어 있으면 이런 차이와 관계없이 내용이 전달됩니다.
CSR만 쓰는 페이지의 첫 응답
<div id="root"></div> <script src="/app.js"></script>
JS를 실행하기 전까지 제목·본문·링크가 없음
SSR·SSG 페이지의 첫 응답
<h1>홈페이지 제작</h1> <p>SEO를 기본으로 설계…</p> <a href="/문의/">문의</a>
크롤러가 바로 읽을 수 있음
03렌더링 방식을 고르는 기준
Next.js 같은 프레임워크는 페이지마다 방식을 섞어 쓸 수 있습니다. 노드릭스 사이트도 공개 페이지는 서버에서 HTML을 만들어 보냅니다. 자바스크립트 의존 페이지의 세부 점검은 자바스크립트 SEO에서 다룹니다.
- 검색으로 유입되어야 하는 페이지인가? 그렇다면 SSG 또는 SSR
- 내용이 배포 주기보다 자주 바뀌는가? 바뀐다면 SSR이나 주기적 재생성(ISR)
- 로그인해야 보는 화면인가? 검색 대상이 아니므로 CSR도 무방
