[SSG와 ISR] 정적 사이트도 이제 유연하게 바뀐다.

728x90

SSG와 ISR 

정적 사이트 생성(Static Site Generation, SSG)은 빠른 로딩 속도와 안정성 덕분에 JAMstack, Headless CMS, 블로그 등 다양한 분야에서 각광받고 있습니다. 하지만 콘텐츠가 자주 변경되거나 대규모 페이지를 다룰 경우 빌드 속도, 업데이트 주기, 유지보수성 측면에서 제약이 생깁니다.
이를 해결하기 위해 등장한 개념이 바로 ISR(Incremental Static Regeneration)입니다.

 

---

1.  기본 개념

SSG (Static Site Generation)

• 정의 : 모든 페이지를 빌드 시점에 정적으로 생성
• 특징 : HTML이 서버나 CDN에 미리 존재
• 기술 예시 : Gatsby, Hugo, Next.js (getStaticProps), Astro 등

ISR (Incremental Static Regeneration)

• 정의 : 초기에는 정적으로 생성하되, 이후 일정 주기로 서버에서 다시 생성 가능
• 특징 : 사용자가 접근한 이후 백그라운드에서 새 HTML을 만들어 반영
• 기술 예시 : Next.js (revalidate), 일부 프레임워크의 hybrid static generation 기능

 

---

2.  렌더링 타이밍 및 업데이트 흐름

항목	SSG	ISR
HTML 생성 시점	빌드 타임	최초 빌드 + 일정 주기 이후 (on-demand)
페이지 업데이트	전체 재빌드 필요	페이지 단위로 부분 갱신
사용자에게 보여지는 페이지	항상 최신은 아님	최신이 아닐 수 있지만 곧 업데이트
CDN 캐싱	매우 적합	적합 (CDN과 연계 가능)

 

---

3.  장단점 비교

SSG의 장점

• 빠른 초기 응답 속도 : HTML이 이미 존재합니다.
• 안정성 : 서버가 없어도 배포가 가능합니다. (정적 파일만 필요)
• 보안 : 서버 로직이 없습니다. → 공격 표면 작음

SSG의 단점

• 규모 확장에 취약 : 수천~수만 개의 페이지 빌드시 시간이 증가합니다.
• 실시간 데이터 반영 불가 : 콘텐츠 수정 시 전체 재빌드가 필요합니다.

ISR의 장점

• 규모 확장 유리 : 자주 안 쓰이는 페이지는 나중에 생성합니다.
• 페이지 단위 갱신 가능 : 특정 페이지만 갱신하거나, 캐시 만료 주기를 설정할 수 있습니다.
• 빠른 배포 + 실시간 반영의 타협안

ISR의 단점

• 최초 요청 느릴 수 있음 : 아직 생성되지 않은 페이지는 첫 요청에서 느릴 수 있습니다.
• 복잡성 증가 : 캐시 관리, 오류 처리 등 고려할 점이 증가합니다.
• 서버 인프라 필요 : 완전 정적 호스팅(CDN-only)은 불가합니다.

 

---

4.  사용 사례 비교

사용 사례	SSG 적합	ISR 적합
기술 블로그	O	O
뉴스 사이트 (실시간 반영 중요)	X	O
마케팅 랜딩 페이지	O	X
제품 상세 페이지 수천 개	X	O
드물게 방문하는 문서 페이지	X	O
페이지 변경 거의 없음	O	X

 

---

5.  ISR 동작 방식 시각화 (Next.js 기준)

- [빌드 시점]
   /product/a → 정적으로 생성됨
   /product/b → 아직 생성되지 않음

- [첫 번째 요청 (b)]
   → 서버에서 HTML 생성 후 응답 + 캐시 저장

- [이후 요청 (b)]
   → 캐시된 HTML 바로 서빙

- [revalidate 기간 초과 시]
   → 다음 요청이 들어오면 백그라운드에서 새로운 HTML 생성

 

 

---

6.  마무리

정적 사이트가 변화에 유연해지는 시대입니다. SSG는 여전히 빠르고 간단하며, ISR은 그 한계를 넘는 유연성을 제공합니다. 프로젝트의 콘텐츠 변화 주기, 페이지 규모, 인프라 제약 등을 고려해 두 방식 중 적절한 전략을 선택하세요.

함께 보면 좋은 자료

외부 사이트 :

• 공식 사이트 - Static Site Generation (SSG)
• 공식 사이트 - Incremental Static Regeneration (ISR)

 

---

반응형