(기본기) SSR과 CSR
HTML을 서버에서 만드느냐 브라우저에서 만드느냐, 웹 렌더링의 두 가지 방식을 이해합니다.
이미 해본 SSR
JSP나 타임리프를 써봤다면, 서버 사이드 렌더링을 이미 하고 있었습니다.
사용자 요청 → 서버에서 HTML 완성 → 브라우저에 전달 → 화면 표시스프링 컨트롤러에서 Model에 데이터를 담고, 뷰 템플릿이 HTML을 만들어서 응답하는 구조.
서버가 완성된 HTML을 만들어서 보낸다 — 이게 SSR(Server-Side Rendering)입니다.
브라우저는 받은 HTML을 그대로 화면에 띄우면 끝입니다.
자바스크립트가 없어도 내용이 보입니다.
이미 해본 CSR
리액트 기초 트랙에서 Vite로 React 앱을 만들고 pnpm build를 했습니다.
그때 나온 index.html을 열어보면 이렇습니다.
<body>
<div id="root"></div>
<script type="module" src="/assets/index-abc123.js"></script>
</body><div id="root"></div> — 비어 있습니다.
브라우저가 자바스크립트 파일을 다운로드하고 실행해야 비로소 화면이 그려집니다.
사용자 요청 → 서버가 빈 HTML 전달 → 브라우저가 JS 실행 → 화면 표시브라우저가 자바스크립트로 화면을 그린다 — 이게 CSR(Client-Side Rendering)입니다.
같은 질문, 다른 답
둘 다 "사용자에게 화면을 보여준다"는 같은 목표를 가지고 있습니다.
차이는 HTML을 누가 만드느냐입니다.
| SSR | CSR | |
|---|---|---|
| HTML을 만드는 곳 | 서버 | 브라우저 |
| 첫 화면 | 빠름 (HTML에 내용 있음) | 느림 (JS 실행 후 표시) |
| 페이지 이동 | 매번 서버에 요청 | 브라우저에서 즉시 전환 |
| SEO (검색 노출) | 좋음 | 추가 작업 필요 |
| 서버 부하 | 매 요청마다 렌더링 | 정적 파일만 서빙 |
| 인프라 | 렌더링 서버가 계속 돌아야 함 | 정적 호스팅으로 배포 가능 |
각각 언제 쓸까
SSR과 CSR은 둘 중 하나만 고르는 게 아닙니다.
CSR이 맞는 경우
관리자 페이지, 대시보드 같은 내부 도구.
SEO가 필요 없고, 로그인한 사용자만 쓰기 때문에 빈 HTML이어도 상관없습니다.
빌드 결과물이 정적 파일(HTML, JS, CSS)이라 S3 같은 저장소에 올려두는 것만으로 배포가 됩니다.
SSR이 맞는 경우
블로그, 쇼핑몰 상품 페이지, 마케팅 랜딩 페이지.
검색 엔진에 노출되어야 하고, 카카오톡에 링크를 붙였을 때 미리보기가 나와야 합니다.
사용자가 첫 화면을 빠르게 봐야 하는 곳입니다.
요즘은 섞어서 씁니다
타임리프 시절에는 모든 페이지가 SSR이었습니다.
Vite + React에서는 모든 페이지가 CSR입니다.
하지만 실무에서는 한 앱 안에서 페이지마다, 심지어 컴포넌트마다 렌더링 방식을 다르게 가져갑니다.
- 상품 목록 페이지 → 서버에서 HTML을 만들어서 검색 노출
- "좋아요" 버튼 → 브라우저에서 클릭 이벤트 처리
- 관리자 대시보드 → 전부 브라우저에서 렌더링
이걸 가능하게 해주는 것이 React의 서버 컴포넌트와 클라이언트 컴포넌트입니다.
다음 문서에서 다룹니다.
직접 해보기
- Vite로 빌드한
dist/index.html의 소스를 열어서<div id="root">안이 비어있는지 확인해보기 - 아무 Next.js 사이트(예: vercel.com)에서 "페이지 소스 보기"로 HTML에 내용이 들어있는지 비교해보기