🐤 What Is SSG?
SSG(Static Site Generation)는 웹사이트의 모든 페이지를 빌드 타임에 미리 HTML 파일로 생성하여 저장하고, 사용자가 요청하면 그 HTML 파일을 그대로 서빙하는 방식이다.
🐤SSG 동작 원리
-
개발자가 작성한 코드(템플릿 + 데이터)를 바탕으로
-
빌드 타임(build time)에 HTML 파일을 생성
-
이 HTML은 서버 또는 CDN에 저장됨
-
사용자가 페이지 요청 시 즉시 정적 HTML을 응답
→ 서버 계산 없이 빠른 응답 가능
SSG의 장점
| 항목 | 설명 |
|---|---|
| 빠른 응답속도 | 미리 만들어둔 HTML이므로 즉시 로딩 가능 |
| 높은 확장성 | 서버 부하 거의 없음, CDN 배포 용이 |
| 보안 | DB 접근이 없어 공격면이 적음 |
| SEO 친화적 | 완전한 HTML 제공으로 크롤링 용이 |
| 비용 효율적 | 서버리스 환경에서도 운영 가능 |
SSG의 단점
| 항목 | 설명 |
|---|---|
| 실시간 반영 어려움 | 콘텐츠 변경 시 전체 사이트 재빌드 필요 |
| 빌드 시간 증가 | 페이지 수가 많을수록 빌드 시간이 길어짐 |
| 데이터 동적 처리 한계 | 사용자별 개인화된 페이지 구성 불가능 (기본적으로) |
🐤 SSG가 필요한 상황과 지원하는 프레임워크
-
블로그, 기술 문서, 포트폴리오 사이트
-
제품 소개 사이트 (landing page)
-
잦은 변경이 없는 콘텐츠 중심의 웹사이트
-
빠른 로딩과 SEO가 중요한 경우
대표 프레임워크
| 프레임워크 | 특징 |
|---|---|
| Next.js | getStaticProps + getStaticPaths로 SSG 구현 |
| Nuxt.js | target: 'static' 설정 시 자동 SSG |
| Gatsby | GraphQL 기반의 React 정적 사이트 생성기 |
| Hugo | Go 언어 기반, 초고속 빌드 |
| Jekyll | Ruby 기반, GitHub Pages 지원 |
🐤 SSG가 불필요한 상황
-
실시간 데이터 반영이 중요한 서비스
예: 쇼핑몰 상품 재고, 게시판, 실시간 뉴스 -
사용자 맞춤 페이지가 필요한 경우
예: 로그인 후 사용자 대시보드 -
대규모 콘텐츠에 대한 자주 변경이 필요한 경우
-
수천 개 이상의 페이지를 자주 업데이트해야 하는 경우
