[CSR과 SSR] 렌더링 방식의 차이와 선택 기준

CSR과 SSR 

웹 애플리케이션을 개발할 때 CSR과 SSR이라는 용어를 자주 접하게 됩니다. 이는 각각 Client Side Rendering과 Server Side Rendering을 의미하며, 사용자에게 페이지를 보여주는 방식에 따른 중요한 차이를 나타냅니다. 이 글에서는 CSR과 SSR의 핵심 차이를 이해하고, 각 방식이 언제 적합한지에 대해 설명합니다.

 

---

1.  CSR(Client Side Rendering)과 SSR(Server Side Rendering)

a.  CSR (Client Side Rendering)

CSR은 브라우저(클라이언트)가 HTML, CSS, JS 파일을 받아와서 Javascript를 통해 페이지를 동적으로 구성하는 방식입니다.

• 작동 방식
  1. 브라우저가 최소한의 HTML 문서와 JS 파일을 다운로드
  2. JS가 실행되면서 필요한 데이터를 API로 요청
  3. 데이터를 받아온 후 DOM을 구성하여 사용자에게 보여줌
• 대표 프레임워크/라이브러리 : React, Vue, Angular (기본적으로 CSR 방식)

b.  SSR (Server Side Rendering)

SSR은 서버가 사용자의 요청 시 즉시 HTML을 생성하여 클라이언트에 전달하는 방식입니다. 브라우저는 이 HTML을 바로 렌더링하므로 첫 화면이 빠르게 나타납니다.

• 작동 방식
  1. 클라이언트가 페이지 요청
  2. 서버에서 HTML을 완성한 상태로 응답
  3. 브라우저는 이를 즉시 렌더링하여 보여줌
  4. 이후 JS가 로드되면서 인터랙션 기능 활성화 (Hydration)
• 대표 프레임워크/도구 : Next.js, Nuxt.js, Ruby on Rails 등

 

---

2.  주요 차이점 비교

항목	CSR (Client Side Rendering)	SSR (Server Side Rendering)
초기 로딩 속도	느릴 수 있음	빠름
SEO (검색 엔진 최적화)	불리함	유리함
서버 부하	적음	많음
사용자 경험 (UX)	더 동적인 UI 가능	초기 렌더는 빠르지만 동적 기능은 느릴 수 있음
복잡성	비교적 단순	복잡도 상승

 

---

 

3.  예시 코드 비교 (React 기반)

a.  CSR 예시 (React)

// index.html
<div id="root"></div>

// index.js
import React from 'react';
import ReactDOM from 'react-dom';
import App from './App';

ReactDOM.render(<App />, document.getElementById('root'));

• 브라우저가 실행된 후 React가 DOM을 구성하며 사용자에게 화면이 보입니다.

b.  SSR 예시 (Next.js)

// pages/index.js
export async function getServerSideProps() {
  const res = await fetch('https://api.example.com/data');
  const data = await res.json();
  return { props: { data } };
}

export default function Home({ data }) {
  return <div>{data.title}</div>;
}

• 서버가 먼저 API 데이터를 가져와 HTML로 렌더링 후 전달하므로 첫 페이지가 즉시 보입니다.

 

---

4.  언제 어떤 방식을 써야 할까?

a.  CSR이 적합한 경우

• 사용자와의 동적 상호작용이 중요한 앱 (예: SPA, 대시보드)
• SEO가 중요하지 않은 내부용 앱
• 서버 리소스를 줄이고 싶을 때

b.  SSR이 적합한 경우

• 검색 엔진 최적화(SEO)가 필수인 페이지 (예: 쇼핑몰, 블로그)
• 초기 페이지 로딩 속도가 중요한 서비스
• 콘텐츠가 정적이고 빠르게 보여야 할 때

 

---

 

5.  마무리

현대 프레임워크(예: Next.js, Nuxt.js)는 CSR과 SSR을 혼합하여 사용할 수 있는 기능(하이브리드 렌더링)을 제공합니다. 즉, 각 페이지나 컴포넌트 단위로 렌더링 방식을 조절할 수 있어 최적화된 사용자 경험을 설계할 수 있습니다.

 

---