🖥️ 15. CSR vs SSR — 렌더링 방식, 이제는 구체적으로 이해하고 써야 할 때다

JM_Dev·2025년 4월 29일

CCR React SSR nest.js seo 개발자기록 서버사이드렌더링 웹퍼포먼스 클라이언트사이드렌더링 프론트엔드

개발자가 되어가는 걸음

목록 보기

15/81

SPA(Single Page Application) 중심으로 개발을 하다 보면 자연스럽게
"CSR과 SSR 중 어떤 방식을 써야 할까?"라는 질문을 마주하게 된다.
이번에는 단순한 개념 설명을 넘어서, 각 렌더링 방식의 구체적인 차이점과 선택 기준을 깊이 정리해봤다.

✅ CSR (Client Side Rendering)이란?

브라우저가 처음 페이지를 불러올 때, 최소한의 HTML과 JavaScript 번들을 받고,
클라이언트(브라우저)에서 전체 화면을 구성하는 방식.

대표적인 프레임워크: React, Vue, Angular

CSR 동작 흐름

브라우저가 빈 HTML(혹은 최소 HTML) 파일을 받음
JavaScript 파일을 다운받고 실행
실행된 JavaScript가 DOM을 만들어서 화면에 그림

<!-- 초기 HTML -->
<body>
  <div id="root"></div>
  <script src="bundle.js"></script>
</body>

사용자가 보는 초기 화면은 거의 비어있음
실제 컨텐츠는 JavaScript가 로드된 후 나타남

CSR 장점

페이지 이동이 빠르다 (전체 페이지 새로고침 없이 이동 가능)
프론트엔드 개발자가 유연하게 화면 제어 가능
복잡한 UI, 애니메이션, 대화형 앱에 유리

CSR 단점

초기 로딩 시간이 느릴 수 있다 (JS가 다 로드되기 전까지는 빈 화면)
검색 엔진(SEO)에 취약할 수 있다
첫 화면 도달 시간(FCP, LCP)이 길어질 수 있음

✅ SSR (Server Side Rendering)이란?

서버에서 HTML을 미리 생성해서 클라이언트에 보내는 방식.
브라우저는 완성된 HTML을 바로 렌더링할 수 있다.

대표적인 프레임워크: Next.js, Nuxt.js

SSR 동작 흐름

사용자가 브라우저에서 URL 요청
서버가 데이터를 가져와 HTML을 렌더링
완성된 HTML을 클라이언트에 전송
브라우저는 바로 화면에 표시
이후 필요한 JavaScript를 하이드레이션(hydration)

export async function getServerSideProps(context) {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();

  return { props: { data } };
}

초기 화면이 바로 표시됨 (SEO에 매우 유리)
동적 데이터 기반 페이지에 강력함

SSR 장점

SEO 최적화에 좋다 (HTML 컨텐츠가 초기부터 존재)
초기 렌더링 속도가 빠르다 (유저 경험 개선)
동적 데이터 처리가 용이하다

SSR 단점

서버에 부하가 크다 (모든 요청마다 렌더링)
페이지 전환 시 서버 요청이 늘어나서 UX가 CSR보다 느릴 수 있다
복잡한 캐싱 전략이 필요할 수 있음

✅ CSR vs SSR 정리 비교

항목	CSR	SSR
렌더링 위치	브라우저(Client)	서버(Server)
초기 로딩 속도	느릴 수 있음 (JS 완전 로드 필요)	빠름 (HTML 먼저 전달)
SEO 최적화	별도 설정 필요 (예: prerendering, meta 추가)	기본적으로 최적화 됨
서버 부하	적음	높음
UX 경험	SPA처럼 부드러움	첫 페이지 빠르고 이후 페이지 전환은 느릴 수도 있음
사용 예시	대화형 앱, 대시보드, 게임	블로그, 쇼핑몰, 뉴스 사이트

📝 내가 느낀 점

처음에는 "CSR이 무조건 좋지 않아?"라고 생각했지만,
SEO나 초기 렌더링 속도를 고려하면 SSR이 필요한 상황이 분명히 존재한다는 걸 알게 됐다.
특히 Next.js를 써보면서 페이지별로 CSR/SSR을 유연하게 섞어쓰는 게
요즘 웹 개발의 트렌드라는 걸 피부로 느끼게 됐다.