CSR (Client-Side Rendering)

 

 

 

1. 개요 (Overview)

**CSR(Client-Side Rendering)**은 웹 페이지의 렌더링이 서버가 아닌 클라이언트(브라우저) 측에서 일어나는 방식입니다.

서버는 단지 뼈대만 있는 HTML 파일과 자바스크립트(JS) 파일을 보내주고, 브라우저가 이 JS를 실행하여 동적으로 DOM을 생성하고 화면을 그립니다. 1990년대의 정적 페이지 방식에서 벗어나, 현대적인 '애플리케이션' 같은 웹 경험을 제공하기 위해 등장했습니다.

💡 작동 원리 (Workflow)

1. Request: 사용자가 웹사이트에 접속합니다.
2. Response: 서버는 빈 <div> 태그가 포함된 최소한의 HTML 파일과 자바스크립트 번들을 응답합니다.
3. Loading: 브라우저가 자바스크립트 파일을 다운로드하고 실행합니다.
4. Rendering: 실행된 JS가 데이터를 호출(API)하고 HTML 요소를 생성하여 빈 화면을 채웁니다.
5. Interactive: 사용자가 화면을 보고 상호작용할 수 있게 됩니다.

2. 주요 기술 스택 (Tech Stack)

CSR을 구현하기 위해 주로 사용되는 라이브러리와 프레임워크들입니다.

프런트엔드 프레임워크

• React: 컴포넌트 기반 UI 라이브러리로, 전 세계에서 가장 많이 사용됩니다.
• Vue.js: 학습 곡선이 낮고 직관적인 템플릿 문법을 제공합니다.
• Angular: 구글에서 만든 프레임워크로, 대규모 엔터프라이즈 앱에 적합한 강력한 기능을 제공합니다.
• Svelte: 가상 DOM 없이 빌드 타임에 코드를 최적화하는 신흥 강자입니다.

빌드 도구 및 번들러

• Vite: 최신 브라우저의 ESM을 활용하여 매우 빠른 개발 속도를 제공합니다.
• Webpack: 가장 널리 쓰이는 모듈 번들러로, 복잡한 설정과 플러그인 생태계가 강점입니다.

상태 관리 (State Management)

• Zustand / Redux / Recoil: 클라이언트 측에서 복잡해지는 데이터를 관리하기 위해 사용됩니다.

3. 주요 특징 (Key Features)

✅ 장점 (Pros)

• 부드러운 사용자 경험 (UX): 첫 로딩 이후에는 페이지 전환 시 서버에 새 HTML을 요청하지 않으므로 화면 깜빡임이 없습니다. (SPA 구현)
• 서버 부하 감소: 렌더링 작업을 클라이언트의 CPU가 수행하므로 서버는 데이터(JSON)만 전달하면 됩니다.
• 빠른 인터랙션: 사용자의 입력에 즉각적으로 반응하는 동적인 UI 구성이 용이합니다.

❌ 단점 (Cons)

• 느린 초기 로딩 (FCP): 모든 자바스크립트 파일을 다운로드하고 실행해야 화면이 보이기 때문에, 처음 접속 시 '흰 화면'을 보는 시간이 길어질 수 있습니다.
• SEO(검색 엔진 최적화) 취약: 검색 엔진 크롤러가 자바스크립트를 실행하지 못하는 경우, 빈 HTML로 인식하여 검색 결과 노출에 불리할 수 있습니다. (현재는 구글 등에서 많이 개선됨)
• 클라이언트 자원 의존: 사용자 기기의 성능에 따라 렌더링 속도가 달라질 수 있습니다.

4. 활용 사례 (Use Cases)

CSR은 다음과 같은 성격의 프로젝트에 특히 유리합니다.

1. SPA (Single Page Application): 한 페이지 안에서 모든 기능이 이루어지는 앱. (예: Gmail)
2. 관리자 대시보드: 검색 엔진 노출보다는 빠르고 복잡한 데이터 조작이 중요한 내부 시스템.
3. SaaS(Software as a Service) 제품: 노션(Notion), 피그마(Figma)와 같이 웹 브라우저 상에서 돌아가는 소프트웨어.
4. 개인화된 서비스: 사용자마다 보여주는 정보가 완전히 다른 소셜 미디어(Facebook, Instagram 등).

5. SSR(Server-Side Rendering)과의 비교

구분CSR (Client-Side)SSR (Server-Side)

렌더링 주체	브라우저 (Client)	서버 (Server)
초기 로딩 속도	느림	빠름
페이지 전환 속도	매우 빠름	매번 서버 요청으로 느림
SEO	불리함	유리함
서버 부하	낮음	높음

💡 결론 및 트렌드

최근에는 CSR의 단점인 초기 로딩과 SEO를 보완하기 위해, Next.js나 Nuxt.js 같은 프레임워크를 사용하여 **SSR/SSG와 CSR을 혼합(Hydration)**해서 사용하는 방식이 주류를 이루고 있습니다.