SSR vs CSR: 서버 사이드 렌더링과 클라이언트 사이드 렌더링의 차이
웹 애플리케이션 개발에서는 페이지를 렌더링하는 방식으로 서버 사이드 렌더링(SSR)과 클라이언트 사이드 렌더링(CSR)을 선택할 수 있습니다. 두 방식은 렌더링 위치와 방식에서 차이를 보이며, 각각의 장단점이 존재합니다.
1. 서버 사이드 렌더링 (SSR)
SSR은 서버에서 페이지를 렌더링하여 클라이언트에 전달하는 방식입니다.
작동 방식
1️⃣ 클라이언트가 서버에 요청을 보냄
2️⃣ 서버가 페이지에 필요한 데이터를 조회하고, HTML, CSS, JS를 모두 삽입한 렌더링된 페이지를 생성
3️⃣ 렌더링된 HTML을 클라이언트로 응답
특징
- 서버에서 렌더링된 HTML이 완성된 상태로 전달되므로 SEO에 유리
- JS 다운로드 전에도 사용자가 이미 완성된 HTML을 볼 수 있어 초기 로딩 속도가 빠름
장점
- 빠른 초기 구동 속도
- 웹 크롤러에 적합하여 검색 엔진 최적화(SEO)에 유리
- HTML과 CSS가 완전히 렌더링된 상태로 제공
단점
- 서버 부하가 증가할 수 있음
- 클라이언트 요청마다 서버에서 렌더링 과정을 거쳐야 하므로 실시간 데이터 처리에서 다소 느릴 수 있음
2. 클라이언트 사이드 렌더링 (CSR)
CSR은 클라이언트 측에서 페이지를 렌더링하는 방식입니다.
작동 방식
1️⃣ 클라이언트가 서버에 요청을 보냄
2️⃣ 서버는 빈 HTML 뼈대를 응답
3️⃣ 클라이언트가 연결된 JS를 다운로드하고 실행하여 동적으로 콘텐츠를 생성
특징
-
JS 파일이 브라우저에서 실행되기 전까지는 화면이 빈 상태
-
초기 로딩 이후에는 페이지 일부만 변경되므로 구동 속도가 빠름
장점
-
서버 부하가 적음
-
사용자와의 인터랙션이 많을수록 빠른 반응 속도 제공
-
페이지 전환 시 빠른 속도와 부드러운 UX 제공
단점
-
초기 로딩 속도가 느림 (JS 다운로드 및 실행 시간 필요)
-
빈 HTML을 제공하기 때문에 SEO에 불리
SSR과 CSR의 주요 차이점 정리
| 구분 | SSR (Server-Side Rendering) | CSR (Client-Side Rendering) |
|---|---|---|
| 렌더링 위치 | 서버에서 렌더링 | 클라이언트(브라우저)에서 렌더링 |
| 초기 로딩 속도 | 빠름 | 느림 |
| SEO 적합성 | 우수 | 낮음 |
| 서버 부하 | 높음 | 낮음 |
| UX 및 반응성 | 서버 응답 대기 시간 발생 | 부드러운 UX, 빠른 반응속도 |
| 페이지 전환 속도 | 느릴 수 있음 | 빠름 |
정리
- SSR은 검색 엔진 최적화와 초기 로딩 속도가 중요한 경우에 적합합니다.
(예: 블로그, 뉴스 사이트) - CSR은 상호작용이 많고 페이지 전환이 빈번한 SPA(Single Page Application)에 적합합니다.
(예: SNS, 대시보드 애플리케이션)
출처 및 참고자료
알고리즘은 백준 허브를 통해 github에 꾸준히 올리고 있습니다.🙂