CSR vs SSR
누가 나한테 갑자기 그래서 CSR 과 SSR을 어느 상황에 사용하고 뭐가 좋은건데? 라고 물어봤는데, 둘 다 뭔지는 알고 있었으나 막상 설명이 어려웠다. 그래서 이참에 정리를 해보았다.
- CSR (Client-Side Rendering)
CSR은 초기 HTML은 거의 비어있는 상태로 전달되고, 브라우저에서 JavaScript가 실행되며 화면을 렌더링하는 방식이다. React, Vue 같은 SPA 프레임워크에서 기본적으로 사용하는 렌더링 방식이다.
동작 흐름
브라우저가 서버에 요청
서버는 최소한의 HTML + JS 번들을 전달
브라우저가 JS를 다운로드하고 실행
JS가 데이터를 요청하고 DOM을 생성하여 화면을 렌더링
장점
페이지 전환이 빠름 (SPA 특성)
서버 부담이 적음
프론트엔드 중심 개발이 가능
인터랙션이 많은 서비스에 유리
단점
초기 로딩 속도가 느릴 수 있음 (JS 다운로드 필요)
SEO에 불리함 (초기 HTML이 비어 있음)
저사양 기기에서 렌더링 부담이 클 수 있음
- SSR (Server-Side Rendering)
SSR은 서버에서 HTML을 완전히 렌더링한 후 브라우저에 전달하는 방식이다. 사용자는 완성된 HTML을 바로 받기 때문에 초기 화면이 빠르게 표시된다. Next.js 같은 프레임워크에서 대표적으로 사용된다.
동작 흐름
브라우저가 서버에 요청
서버가 데이터 조회
서버에서 HTML을 완성하여 렌더링
브라우저는 완성된 HTML을 바로 표시
이후 JS가 실행되며 인터랙션 활성화
장점
초기 로딩 속도가 빠름
SEO에 유리함 (완성된 HTML 제공)
크롤러가 콘텐츠를 쉽게 인식
단점
서버 부담이 커짐
페이지 요청마다 렌더링 필요
구현 복잡도 증가
- CSR vs SSR 비교 항목 CSR SSR 렌더링 위치 브라우저 서버 초기 로딩 느릴 수 있음 빠름 페이지 이동 매우 빠름 매 요청마다 렌더링 SEO 불리 유리 서버 부하 낮음 높음 인터랙션 매우 유리 hydration 필요
- 언제 어떤 방식을 사용하는가
CSR이 적합한 경우
로그인 기반 서비스
대시보드
SaaS 서비스
인터랙션이 많은 웹앱
예: Notion, Figma, Gmail
SSR이 적합한 경우
검색 노출이 중요한 서비스
콘텐츠 중심 서비스
초기 로딩 속도가 중요한 페이지
예: 쇼핑몰, 블로그, 뉴스 사이트
- 추가 개념
최근 프레임워크들은 CSR과 SSR을 혼합해서 사용하는 방식을 제공한다.
대표적인 예
Next.js: SSR / SSG / CSR 혼합
Nuxt.js: SSR + CSR
이러한 방식은 초기 로딩은 SSR로 빠르게 제공하고 이후 인터랙션은 CSR로 처리하는 구조를 만든다.