SSR

김뉴오·2025년 4월 22일

키워드

목록 보기

2/15

SSR vs CSR 비교 및 추가 정보

SSR과 CSR은 웹 애플리케이션의 렌더링 방식에 따른 주요 아키텍처로, 각각의 장단점이 명확하다. 최근에는 두 방식의 장점을 결합한 Hydration(하이드레이션) 또는 ISR(Incremental Static Regeneration) 같은 하이브리드 방식도 많이 사용되고 있다.

랜더링( Rendering) = 코드를 그려낸다
메타데이터(metadata) = 데이터 자체가 아니라 데이터를 더 잘 이해하고 활용하는 정보[검색 엔진]
ex) 음악 파일 - 가수, 제목
영상 파일 - 제목, 조회수, 업로드 날짜

SSR(Server-Side Rendering) – 서버 사이드 렌더링

특징

서버에서 HTML을 완성한 뒤 클라이언트(브라우저)로 전송
HTML이 즉시 렌더링되어 사용자 경험(UX)이 빠름
SEO(검색엔진 최적화)에 유리함

장점

SEO(검색 엔진 최적화)에 강함

HTML이 완전한 형태로 제공되므로, Google, Naver 같은 검색 엔진이 쉽게 크롤링 가능

초기 페이지 로딩 속도 빠름 (TTV 빠름)
브라우저가 HTML을 바로 렌더링 가능
JavaScript 실행을 기다릴 필요 없이 사용자에게 화면을 먼저 제공

초기 데이터 제공 가능

HTML과 함께 데이터를 서버에서 받아오기 때문에 API 호출 없이도 데이터를 보여줄 수 있음

단점

인터랙션 지연(TTI 느림)
화면이 렌더링된 후에도 JavaScript 로직이 실행될 때까지 버튼 클릭 등의 동작이 반응하지 않을 수 있음

서버 부하 증가
요청마다 서버가 HTML을 생성하여 반환해야 하므로, 트래픽이 많으면 서버 부하가 심해질 수 있음

페이지 전환 시 전체 새로고침 발생

다른 페이지로 이동할 때마다 새 HTML을 받아야 하므로 부드러운 화면 전환이 어려움

사용 예시
SEO가 중요한 블로그, 뉴스 사이트, 기업 홈페이지 등
검색 엔진 노출이 중요한 서비스

CSR(Client-Side Rendering) – 클라이언트 사이드 렌더링

특징

브라우저가 JavaScript를 다운로드하고 실행하여 HTML을 동적으로 생성
서버는 기본적인 HTML 템플릿만 제공하고, 데이터 로딩 및 UI 생성을 클라이언트가 담당
React, Vue, Angular 같은 프론트엔드 프레임워크에서 주로 사용

장점

인터랙션 반응 속도 빠름 (TTI 빠름)

JavaScript 로직이 실행된 이후에는 사용자의 모든 액션(버튼 클릭, 데이터 요청 등)에 빠르게 반응 가능

부드러운 페이지 전환

전체 페이지를 다시 불러오지 않고 필요한 부분만 업데이트 가능
SPA(Single Page Application)에서 강력한 UX 제공

서버 부하 감소

클라이언트에서 많은 연산을 수행하므로 서버 부담이 적음
API만 제공하면 되기 때문에 서버 확장성이 좋음

단점

초기 로딩 속도 느림 (TTV 지연)

JavaScript를 다운로드하고 실행해야 화면이 보이므로 첫 화면이 늦게 뜰 수 있음

SEO 최적화 어려움

HTML이 비어 있는 상태에서 로드되므로 검색 엔진 크롤러가 내용을 제대로 분석하지 못할 가능성이 있음
Google의 크롤러는 JavaScript 실행을 지원하지만, 네이버와 같은 일부 크롤러는 아직 완벽하지 않음

첫 페이지 로딩 시간 증가

SPA 방식으로 구현할 경우, 처음에 모든 JS 리소스를 로딩해야 하므로 성능 저하 가능성 있음

사용 예시

로그인 기반 서비스 (관리 시스템, 대시보드, 소셜 네트워크)
인터랙션이 많은 웹 애플리케이션 (To-Do 앱, 채팅 서비스 등)

SSR vs CSR 선택 기준

기준	SSR	CSR
초기 로딩 속도	빠름	느림
SEO 최적화	유리	불리
페이지 전환 속도	느림 (전체 새로고침)	빠름 (SPA 방식)
인터랙션 속도	느림 (초기)	빠름
서버 부하	높음	낮음
사용 사례	블로그, 뉴스, 마케팅 페이지	대시보드, 소셜 네트워크, 웹 앱