2026-01-12
SSR/CSR/SSG/ISR
SSR이란?
서버에서 매 요청마다 HTML을 미리 생성해서 브라우저에 전달하는 렌더링 방식
- 요청이 오면
- 서버에서 React 컴포넌트를 실행
- 완성된 HTML을 만들어서 응답
- 브라우저는 받은 HTML을 바로 화면에 그림
SSR 과정
- 브라우저 요청
- 서버에서 React 실행
- HTML 생성
- HTML 응답
- 브라우저 화면 표시
- JS 로드 후 Hydration(하이드레이션)
Hydration이란? 서버에서 만든 HTML에 이벤트와 상태를 연결하는 과정
Next.js에서는, SSR 방식으로 정적인 html을 내려주어 초기 화면을 빠르게 렌더한 이후, hydration을 통해 이벤트 리스너 부착 등의 자바스크립트 작업을 수행하여 정적인 화면을 동적으로 전환하는 작업을 수행
SSR 장담점
장점
- 초기 로딩 속도 개선
- SEO에 유리: 첫 응답에 실제 콘텐츠 포함
- JS 로딩 전에도 콘텐츠 확인 가능
단점
- 서버 부하 증가
- 응답 속도 서버 성능에 의존
- 캐싱 전략 필요
- 구현 복잡도 증가
CSR이란?
브라우저에서 JavaScript를 실행하여 화면을 렌더링하는 방식
- 서버는 기본적인 HTML과 JavaScript 파일만 전달
- 실제 화면 구성은 브라우저에서 React가 수행
- 초기 HTML은 비어 있거나 최소한의 구조만 포함
CSR 과정
- 브라우저 요청
- 서버에서 빈 HTML + JS 파일 응답
- 브라우저가 JS 파일 다운로드
- React 실행
- 브라우저에서 화면 렌더링
- 사용자 인터랙션 처리
CSR 장단점
장점
- 서버 부하가 적음
- 프론트엔드와 백엔드 역할 분리 명확
- 페이지 전환이 빠르고 부드러움 (SPA)
- 사용자 인터랙션 중심 서비스에 적합
단점
- 초기 로딩 속도가 느림
- SEO에 불리함 (초기 HTML에 콘텐츠 없음)
- JS 로딩 실패 시 화면 표시 불가
- 저사양 기기에서 성능 저하 가능
SSG란?
빌드 시점에 HTML을 미리 생성해 두고, 요청 시 그대로 제공하는 렌더링 방식
- 서버에서 매 요청마다 렌더링하지 않음
- 배포 전에 HTML이 이미 만들어져 있음
- 요청이 오면 정적 파일 그대로 응답
SSG과정
- 빌드 시점
- React 컴포넌트 실행
- HTML 파일 생성
- 배포
- 사용자 요청
- 미리 만들어진 HTML 응답
- JS 로드 후 Hydration
- 이후 CSR 방식으로 동작
SSG 장단점
장점
- 매우 빠른 응답 속도
- 서버 부하 거의 없음
- SEO에 매우 유리
- CDN 캐싱에 최적
단점
- 데이터가 자주 바뀌는 페이지에 부적합
- 빌드 시간이 길어질 수 있음
- 실시간 데이터 반영 어려움
ISR이란?
SSG의 장점을 유지하면서, 일정 주기나 조건에 따라 서버에서 페이지를 재생성하는 렌더링 방식
- 기본적으로는 SSG처럼 정적 HTML 제공
- 하지만 데이터가 변경되면 빌드 전체를 다시 하지 않고
- 요청 시점에 해당 페이지만 부분적으로 재생성
ISR 과정
- 빌드 시점
- HTML 정적 생성 (SSG와 동일)
- 사용자 요청
- 기존 HTML 응답 (빠름)
- 설정된 재검증 시간(revalidate) 경과
- 다음 요청 시
- 서버에서 백그라운드로 페이지 재생성
- 이후 요청부터는
- 새 HTML 제공
- JS 로드 후 Hydration
- 이후 CSR 방식으로 동작
ISR 장단점
장점
- SSG 수준의 빠른 응답 속도
- 서버 부하 감소
- SEO에 매우 유리
- 빌드 시간 단축 (전체 빌드 불필요)
- 데이터 최신성 어느 정도 보장
단점
- 완전 실시간 데이터에는 부적합
- 설정(revalidate)에 따라 데이터 지연 가능
- 구현 난이도 증가
- 프레임워크(Next.js 등)에 의존적
차이점 비교
| 구분 | CSR | SSR | SSG | ISR |
|---|---|---|---|---|
| 렌더링 시점 | 브라우저 | 요청 시 서버 | 빌드 시 | 빌드 + 요청 시 |
| 초기 HTML | 없음 | 있음 | 있음 | 있음 |
| 초기 속도 | 느림 | 빠름 | 매우 빠름 | 매우 빠름 |
| SEO | 불리 | 유리 | 매우 유리 | 매우 유리 |
| 서버 부하 | 적음 | 많음 | 거의 없음 | 적음 |
| 데이터 최신성 | 높음 | 높음 | 낮음 | 중간 |
| 빌드 비용 | 없음 | 없음 | 큼 | 적음 |
언제 쓰는가
SSR이 적합한 경우
- SEO가 중요한 서비스
- 블로그
- 커머스
- 마케팅 페이지
- 초기 화면이 중요한 경우
CSR이 적합한 경우
- 로그인 후 서비스
- 대시보드
- 관리자 페이지
SSG가 적합한 경우
- 내용이 자주 바뀌지 않는 페이지
- SEO가 중요한 페이지
- 블로그 글
- 문서 페이지
- 랜딩 페이지
- 회사 소개 페이지
ISR이 적합한 경우
- 데이터가 가끔 변경되는 페이지
- 상품 목록
- 블로그 목록
- 뉴스 메인 페이지
- SEO + 성능이 모두 중요한 경우
- 전체 빌드를 자주 하고 싶지 않을 때
요약
- CSR: 브라우저에서 JavaScript로 화면을 렌더링 (브라우저에서 그림)
- SSR: 요청 시 서버에서 HTML을 생성 (요청 때 서버에서 그림)
- SSG: 빌드 시 HTML을 미리 생성 (미리 그려둠)
- ISR: 정적 페이지를 유지하면서 주기적으로 재생성 (미리 그려두되, 필요할 때 조금씩 다시 그림)