CSR과 SSR을 공부하다 보면 SSG와 ISR이라는 렌더링 방식도 자주 만나게 돼요.
두 방식 모두 미리 HTML을 생성해 빠르게 제공한다는 공통점이 있지만, 콘텐츠를 업데이트하는 방법에서 차이가 있습니다.
SSG는 빌드할 때 HTML을 만들고, ISR은 일정 주기로 HTML을 새로 만들어요.
이번 글에서는 SSG와 ISR의 차이와 각각 언제 사용하면 좋은지 간단하게 정리해 볼게요.
SSG란?
SSG는 Static Site Generation의 약자로, 정적 사이트 생성이라고 해요.
사용자가 페이지에 접속할 때마다 HTML을 만드는 것이 아니라, 프로젝트를 빌드하는 시점에 필요한 HTML을 미리 생성합니다.
SSG 동작 과정
- 프로젝트를 빌드해요.
- 필요한 데이터를 가져와요.
- 페이지별 HTML을 미리 생성해요.
- 생성된 파일을 서버나 CDN에 저장해요.
- 사용자가 접속하면 저장된 HTML을 바로 전달해요.
이미 만들어진 파일을 전달하기 때문에 서버에서 매번 HTML을 생성할 필요가 없어요.
SSG 장점
- 페이지를 빠르게 보여줄 수 있어요.
- 서버의 렌더링 부담이 적어요.
- 콘텐츠가 포함된 HTML을 제공해 SEO에 유리해요.
- 정적 파일을 CDN에 배포하기 편리해요.
SSG 단점
- 콘텐츠를 수정하면 다시 빌드해야 해요.
- 페이지가 많으면 빌드 시간이 길어질 수 있어요.
- 실시간으로 변경되는 데이터에는 적합하지 않아요.
SSG는 내용이 자주 변경되지 않는 블로그, 문서, 회사 소개 페이지 등에 잘 어울립니다.
ISR이란?
ISR은 Incremental Static Regeneration의 약자로, 점진적 정적 재생성이라고 해요.
SSG처럼 정적 HTML을 제공하지만, 전체 사이트를 다시 빌드하지 않고 일정 조건이나 시간이 지나면 특정 페이지를 새로 생성할 수 있습니다.
예를 들어 상품 페이지의 갱신 시간을 60초로 설정했다면, 기존 페이지를 빠르게 제공하면서 일정 시간이 지난 후 새로운 데이터를 반영한 페이지를 생성할 수 있어요.
ISR 동작 과정
- 미리 생성된 HTML을 사용자에게 전달해요.
- 설정된 갱신 시간이 지났는지 확인해요.
- 필요한 경우 새로운 데이터를 가져와요.
- 해당 페이지의 HTML을 다시 생성해요.
- 이후 사용자에게 갱신된 페이지를 제공해요.
전체 사이트가 아니라 필요한 페이지만 갱신한다는 점이 핵심이에요.
ISR 장점
- 정적 페이지의 빠른 속도를 유지할 수 있어요.
- 전체 프로젝트를 다시 배포하지 않아도 돼요.
- 변경된 페이지만 선택적으로 갱신할 수 있어요.
- 페이지가 많은 사이트에서도 활용하기 좋아요.
ISR 단점
- 데이터가 즉시 반영되지 않을 수 있어요.
- 사용자가 잠시 이전 콘텐츠를 볼 수 있어요.
- 캐시와 갱신 시점을 함께 고려해야 해요.
- 지원하는 프레임워크와 배포 환경이 필요해요.
SSG와 ISR의 핵심 차이
SSG와 ISR은 모두 미리 생성된 HTML을 제공하기 때문에 속도와 SEO 측면에서 유리해요.
차이는 페이지를 언제 다시 생성하느냐에 있습니다.
- SSG는 빌드할 때 페이지를 생성해요.
- SSG 콘텐츠를 수정하려면 다시 빌드하고 배포해야 해요.
- ISR은 배포 후에도 필요한 페이지를 다시 생성할 수 있어요.
- ISR은 갱신 주기에 따라 이전 데이터가 잠시 표시될 수 있어요.
콘텐츠가 거의 바뀌지 않는다면 SSG가 단순하고, 일정한 주기로 변경된다면 ISR이 편리합니다.
SSG는 언제 사용할까?
SSG는 콘텐츠가 자주 변경되지 않고 빠른 페이지 표시가 중요한 경우에 적합해요.
- 개발 문서
- 회사 소개 페이지
- 개인 포트폴리오
- 이벤트 안내 페이지
- 업데이트가 적은 블로그
- 자주 바뀌지 않는 랜딩 페이지
페이지 내용이 고정되어 있다면 요청마다 서버에서 HTML을 만들 이유가 없기 때문에 SSG가 효율적이에요.
ISR은 언제 사용할까?
ISR은 정적 페이지의 속도를 유지하면서 새로운 데이터를 주기적으로 반영해야 할 때 적합해요.
- 쇼핑몰 상품 상세 페이지
- 가격이나 재고가 변경되는 페이지
- 뉴스 또는 콘텐츠 목록
- 게시물이 많은 블로그
- 주기적으로 갱신되는 통계 페이지
- 부동산이나 채용 정보 페이지
다만 결제 금액이나 실시간 재고처럼 항상 최신 정보가 필요한 데이터는 화면에 표시된 정적 콘텐츠만 믿으면 안 돼요.
이러한 데이터는 API를 통해 다시 확인하거나 서버에서 검증해야 합니다.
SSR과 ISR은 무엇이 다를까?
SSR은 사용자가 페이지를 요청할 때 서버에서 HTML을 생성해요.
반면 ISR은 미리 만들어 둔 HTML을 먼저 제공하고, 필요한 시점에 해당 페이지를 다시 생성해요
- 항상 최신 데이터가 중요하다면 SSR을 고려해요.
- 빠른 응답과 주기적인 갱신이 중요하다면 ISR이 적합해요.
- 거의 변경되지 않는 콘텐츠라면 SSG가 단순해요.
ISR은 SSG의 빠른 속도와 SSR의 데이터 갱신 장점을 일부 결합한 방식으로 이해할 수 있어요.
정리
SSG와 ISR의 핵심 차이는 정적 페이지를 갱신할 수 있는지예요.
- SSG: 빌드할 때 HTML을 미리 생성해요.
- ISR: 배포 후에도 필요한 HTML을 다시 생성할 수 있어요.
- 변경이 거의 없다면: SSG가 적합해요.
- 주기적으로 변경된다면: ISR이 편리해요.
- 항상 최신 데이터가 필요하다면: SSR이나 별도의 API 요청을 고려해요.
어떤 방식이 무조건 더 좋은 것은 아니에요. 콘텐츠 변경 주기와 페이지 수, 최신 데이터의 중요도, 배포 환경을 함께 고려해 선택하는 것이 좋습니다.
'개발 > Frontend' 카테고리의 다른 글
| CSR과 SSR 차이 쉽게 정리 (동작 방식과 SEO 비교) (0) | 2026.07.31 |
|---|---|
| shadcn/ui 커스텀 테마 만들기 CSS 변수 가이드 (0) | 2026.06.09 |
| useTransition vs 디바운스 차이와 실전 활용 (0) | 2026.06.07 |
| pnpm vs yarn 차이와 선택 기준 (0) | 2026.06.06 |
| React Hook Form Zod 폼 검증 실전 패턴 (0) | 2026.06.05 |
