🖥 클라이언트 사이드 렌더링 (CSR: Client-Side Rendering)
초기에는 빈 HTML과 JavaScript만 내려받고, 브라우저에서 모든 콘텐츠를 렌더링하는 방식
(예: React SPA, Vue SPA 등)
✅ 장점
- 빠른 사용자 상호작용: 초기 로딩 이후엔 페이지 간 이동이 빠름 (SPA 구조)
- 프론트엔드 개발 자유도: UI 상태 관리와 라우팅을 클라이언트에서 자유롭게 구성 가능
- 서버 부하 감소: 서버는 주로 정적 리소스만 제공
❌ 단점
- 초기 로딩 속도 느림: JavaScript 실행 전까지 빈 화면 or 로딩 스피너만 보임
- SEO에 불리: 크롤러가 JavaScript 렌더링을 제대로 못하면 검색 노출에 취약
- JS 오류에 민감: JavaScript가 실패하면 화면 자체가 안 뜰 수 있음
🌐 서버 사이드 렌더링 (SSR: Server-Side Rendering)
요청이 들어올 때마다 서버에서 HTML을 생성해서 응답하는 방식
(예: Next.js의 getServerSideProps, 전통적인 JSP/PHP 등)
✅ 장점
- 빠른 초기 렌더링: HTML을 서버에서 즉시 생성해서 사용자에게 빠르게 보여줌
- SEO에 유리: 콘텐츠가 미리 렌더링되어 있어 검색 엔진이 쉽게 읽을 수 있음
- 첫 페이지 진입 성능 우수: 특히 느린 네트워크 환경에서 효과적
❌ 단점
- 서버 부하 증가: 요청마다 HTML을 다시 렌더링해야 하므로 서버에 부담
- 상호작용까지 대기 시간 발생: 초기 HTML은 보이지만 JavaScript 바인딩까지 시간이 걸림 (Hydration)
- 복잡한 구현: 데이터 페칭, 인증 등에서 클라이언트/서버 경계 관리가 필요함
✅ 요약 비교표
| 항목 | CSR (클라이언트 사이드) | SSR (서버 사이드) |
|---|
| 초기 속도 | 느림 | 빠름 |
| SEO | 불리함 | 유리함 |
| 서버 부하 | 낮음 | 높음 |
| 사용자 경험 | 페이지 전환 빠름 | 새로고침처럼 동작할 수 있음 |
| 복잡도 | 비교적 단순 | 구현 및 관리가 복잡할 수 있음 |
| 사용 예시 | 내부 대시보드, SPA | 마케팅 페이지, 블로그 등 SEO 중요 페이지 |