개발하면서 CSR과 SSR, 그리고 SPA와 MPA 같은 개념은 익숙하게 들어왔지만,
이번 기회에 한 번 제대로 정리해두고 싶어서 글로 남깁니다.
막상 누군가에게 설명하려고 하면,
“이게 맞나?” 싶은 부분도 많고,
각 개념이 어떻게 연결되는지도 애매하게 느껴질 때가 있었거든요.
그래서 이번 글에서는 CSR과 SSR에 초점을 맞춰
개념부터 특징, 장단점, 그리고 언제 어떤 방식이 적합한지 간단하게 정리해보려 합니다.
이 글은 MDN Web Docs와 Naver D2 게시글을 참고하여 작성했습니다.
용어정리
CSR (Client Side Rendering)
- 클라이언트(브라우저)에서 렌더링하는 방식입니다.
- 서버는 HTML 껍데기만 주고, 실제 내용은 JS가 실행되면서 브라우저에서 그려집니다.
CSR의 장점
사용자 경험이 부드럽습니다. web docs에서는 이를
상호작용성이라 칭하고 있습니다. 모든 페이지 업데이트시 전체 페이지를 새로 고칠 필요가 없습니다. 즉, 화면의 깜빡임이 없습니다.성능 : 서버는 초기 HTML 콘텐츠와 JS 에셋만 전송하면 됩니다. 때문에, 서버 리소스 소모가 적습니다.
CSR의 단점
- 초기 로딩이 느릴 수 있습니다.
HTML은 껍데기만 오고, 콘텐츠를 그리려면 JS 파일 로딩 → 실행 → 데이터 요청까지 기다려야 합니다. - SEO에 불리합니다.
HTML 안에 콘텐츠가 없기 때문에, 검색 엔진이 제대로 내용을 읽어내지 못합니다.
SSR (Server Side Rendering)
- 서버에서 HTML을 렌더링한 뒤, 완성된 페이지를 클라이언트에 전달하는 방식입니다.
- 브라우저는 자바스크립트가 실행되기 이전에 이미 콘텐츠가 포함된 HTML을 받아서 화면에 출력할 수 있습니다.
- 즉, 사용자는 페이지 로딩 시점부터 콘텐츠를 바로 확인할 수 있고, 검색엔진도 그 내용을 쉽게 읽을 수 있습니다.
SSR의 장점
초기 로딩 속도가 빠릅니다.
사용자는 JS가 로드되고 실행되기 전에도,
서버에서 내려준 HTML을 먼저 확인할 수 있습니다.SEO에 유리합니다.
페이지 내용이 HTML 안에 바로 포함되어 있기 때문에
검색엔진이 크롤링하기에 최적화되어 있습니다.소셜 미디어 공유 시 미리보기 잘 동작합니다.
OpenGraph, meta 태그 등이 SSR 시점에 반영되므로
링크 미리보기도 잘 뜹니다.
SSR의 단점
서버 부하가 큽니다.
사용자의 요청마다 HTML을 실시간으로 렌더링해야 하기 때문에
트래픽이 많을 경우 서버 리소스가 크게 소모됩니다.응답 지연 가능성
SSR은 페이지가 완성되어야 전달되므로,
API 요청 지연이나 서버 렌더링 시간이 느리면
전체 페이지 로딩도 늦어질 수 있습니다.
요약
| 구분 | CSR (Client Side Rendering) | SSR (Server Side Rendering) |
|---|---|---|
| 렌더링 위치 | 브라우저(클라이언트) | 서버 |
| 초기 로딩 속도 | 느림 (JS 로딩 후 렌더링) | 빠름 (HTML 완성본 제공) |
| SEO (검색 최적화) | 불리함 | 유리함 |
| 사용자 경험 | 상호작용 부드러움, 깜빡임 없음 | 초기 화면 빠르게 제공 가능 |
| 서버 부담 | 적음 | 큼 (요청마다 렌더링) |
| JS 의존성 | 매우 높음 | 낮음 (기본 HTML 제공됨) |
| 소셜 공유 (OG 태그 등) | 미리보기 안 뜰 수 있음 | 정상적으로 뜸 |