웹 렌더링 방식 정리 (CSR / SSR / SSG / ISR)
웹 프론트엔드 전반에서 사용되는 주요 렌더링 방식인
CSR, SSR, SSG, ISR을 개념 중심으로 정리한 문서입니다.
렌더링 방식 한눈에 비교
| 방식 | HTML 생성 시점 | 주요 특징 |
|---|---|---|
| CSR | 브라우저 | SPA, JS 중심 |
| SSR | 요청 시 서버 | SEO, 초기 로딩 |
| SSG | 빌드 시 | 빠른 응답 |
| ISR | 빌드 + 재생성 | 성능 + 최신성 |
CSR (Client-Side Rendering)
개념
브라우저에서 JavaScript를 실행하여 화면을 렌더링하는 방식입니다.
동작 흐름
- 서버에서 빈 HTML과 JS 파일 전달
- 브라우저에서 JS 실행
- API 호출 후 화면 구성
장점
- 서버 부하 적음
- 인터랙티브한 SPA 구현에 적합
단점
- 초기 로딩 느림
- SEO에 불리
사용 예
- 관리자 페이지
- 로그인 이후 화면
SSR (Server-Side Rendering)
개념
요청이 들어올 때마다 서버에서 HTML을 생성하는 방식입니다.
동작 흐름
- 사용자 요청
- 서버에서 데이터 조회
- 완성된 HTML 응답
장점
- 빠른 초기 화면 표시
- SEO에 유리
단점
- 서버 부하 증가
- 트래픽 증가 시 비용 상승
사용 예
- 뉴스
- 검색 결과 페이지
SSG (Static Site Generation)
개념
빌드 시점에 모든 페이지의 HTML을 미리 생성하는 방식입니다.
동작 흐름
- 빌드 시 HTML 생성
- CDN에 저장
- 요청 시 즉시 응답
장점
- 매우 빠른 응답
- 서버 비용 최소
- SEO 최상
단점
- 데이터 변경 시 재빌드 필요
- 실시간 데이터에 부적합
사용 예
- 블로그
- 문서 사이트
- 회사 소개 페이지
ISR (Incremental Static Regeneration)
개념
SSG 방식으로 생성된 페이지를 일정 주기로 재생성하는 방식입니다.
동작 흐름
- 기본은 정적 HTML 제공
- 설정된 시간 경과 후 요청 발생
- 서버에서 새 HTML 생성 및 교체
장점
- 빠른 성능 유지
- 최신 데이터 반영 가능
- 전체 재빌드 불필요
단점
- 설정 복잡
- 완전 실시간은 아님
사용 예
- 상품 목록
- 주기적으로 갱신되는 콘텐츠
선택 가이드
- CSR: 앱 중심, 사용자 상호작용이 많은 경우
- SSR: SEO와 초기 로딩이 중요한 경우
- SSG: 변경 거의 없는 콘텐츠
- ISR: 성능과 최신성 모두 필요한 경우
요약
CSR → 인터랙션 중심
SSR → SEO 중심
SSG → 성능 중심
ISR → 균형형
SSR 이후의 동작: Hydration
SSR로 HTML이 생성된 이후, 클라이언트에서 JavaScript가 로드되며
서버에서 생성된 HTML에 이벤트와 상태를 연결하는 과정을
Hydration이라고 합니다.
Hydration이 완료되면 페이지는 CSR 방식처럼 동작합니다.
렌더링 방식과 SEO
검색 엔진은 기본적으로 HTML 기준으로 콘텐츠를 수집합니다.
- CSR: 초기 HTML에 콘텐츠가 없어 SEO에 불리
- SSR: 완성된 HTML 제공으로 SEO에 유리
- SSG/ISR: 정적 HTML 제공으로 SEO에 매우 유리
Jamstack 관점
Jamstack 아키텍처에서는 SSG를 기본 전제로 합니다.
- Markup: 빌드 시 생성된 정적 HTML
- JavaScript: 클라이언트 인터랙션
- APIs: 서버리스 또는 외부 API
이 구조에서 SSG는 Jamstack의 핵심 구성 요소입니다.