React 기반 애플리케이션은 어디에서, 언제 HTML을 생성하느냐에 따라 네 가지 렌더링 전략으로 나뉩니다. CSR(클라이언트 사이드 렌더링), SSR(서버 사이드 렌더링), SSG(정적 사이트 생성), ISR(증분 정적 재생성)이 그것입니다. 각 전략은 성능, SEO, 데이터 신선도 측면에서 서로 다른 트레이드오프를 가집니다.
CSR은 브라우저가 빈 HTML을 받은 후 JavaScript를 실행하여 화면을 구성하는 방식입니다. 서버는 데이터를 제공하는 API 역할만 담당합니다.
브라우저 요청
│
▼
서버: 빈 HTML + JS 번들 전달
│
▼
브라우저: JS 실행 → API 요청 → 데이터 수신 → DOM 생성
초기 JS 번들이 모두 로드되기 전까지 화면이 비어 있습니다. 때문에 초기 로드가 느리고 검색 엔진이 콘텐츠를 인식하기 어렵습니다. 그러나 한 번 로드된 이후에는 페이지 전환이 빠르고 서버 부하가 낮습니다.
SSR은 요청이 들어올 때마다 서버가 데이터를 페칭하고 HTML을 완성하여 응답하는 방식입니다.
브라우저 요청
│
▼
서버: 데이터 페칭 → HTML 생성 → 완성된 HTML 전달
│
▼
브라우저: HTML 즉시 표시 → JS 로드 → Hydration
항상 최신 데이터를 반영할 수 있고, 초기 화면이 빠르게 표시되며, 검색 엔진이 콘텐츠를 인식하기 쉽습니다. 단점은 요청마다 서버가 작업을 수행하므로 서버 부하가 증가하고, Hydration 완료 전까지 인터랙션이 불가능한 구간이 존재한다는 것입니다.
SSG는 빌드 시점에 모든 HTML을 미리 생성하여 CDN에 배포하는 방식입니다. 사용자 요청이 들어오면 이미 완성된 파일을 즉시 제공합니다.
[빌드 시점]
모든 페이지 데이터 페칭 → HTML 파일 생성 → CDN 업로드
[사용자 요청 시]
CDN에서 완성된 HTML 즉시 응답
응답 속도가 가장 빠르고 서버 부하가 거의 없습니다. SEO에도 유리합니다. 그러나 데이터가 변경되면 전체를 다시 빌드해야 하므로, 콘텐츠가 자주 바뀌는 페이지에는 적합하지 않습니다.
ISR은 SSG의 장점(빠른 응답)과 SSR의 장점(데이터 최신화)을 절충한 방식입니다. 정적 파일을 제공하되, 설정한 시간 간격(revalidate)이 지나면 백그라운드에서 페이지를 재생성합니다.
첫 번째 요청: CDN에서 정적 HTML 즉시 응답
│
▼
revalidate 시간 경과 후 다음 요청:
기존 HTML 응답 (즉시)
+ 백그라운드에서 새 HTML 생성 → CDN 교체
│
▼
이후 요청: 새로운 HTML 응답
| 항목 | CSR | SSR | SSG | ISR |
|---|---|---|---|---|
| 초기 로드 속도 | 느림 | 보통 | 빠름 | 빠름 |
| 데이터 신선도 | 실시간 | 실시간 | 빌드 시점 | 준실시간 |
| SEO | 불리 | 유리 | 유리 | 유리 |
| 서버 부하 | 낮음 | 높음 | 없음 | 낮음 |
| 빌드 시간 | 짧음 | 짧음 | 길 수 있음 | 보통 |
| 적합한 페이지 | 대시보드, 관리자 | 개인화, 실시간 | 블로그, 문서 | 상품 목록, 뉴스 |
로그인 후 개인화된 데이터를 보여주는 대시보드나 관리자 페이지는 SEO가 불필요하므로 CSR이 적합합니다. 사용자마다 다른 콘텐츠를 제공하거나 실시간 데이터가 필요한 페이지는 SSR이 적합합니다. 블로그 글이나 기술 문서처럼 내용이 자주 변하지 않는 페이지는 SSG가 최적입니다. 상품 목록이나 뉴스처럼 주기적으로 업데이트되지만 실시간성이 필수는 아닌 페이지에는 ISR이 좋은 선택입니다.
하나의 애플리케이션 안에서 페이지마다 다른 전략을 혼용하는 것이 가능합니다. Next.js App Router는 컴포넌트 단위로 이 전략들을 세밀하게 제어할 수 있도록 지원합니다.