SSG
개요
SSG(Static Site Generator, 정적 사이트 생성기)는 마크다운, 데이터 파일, 템플릿 등을 입력으로 받아 빌드(배포 전) 시점에 정적인 HTML, CSS, JavaScript 파일들을 미리 생성하는 도구입니다. 서버 사이드에서 매 요청마다 페이지를 동적으로 생성하는 방식(SSR)과 달리, 사전에 생성된 정적 파일을 웹 서버나 CDN을 통해 제공하여 빠른 성능과 높은 보안성을 제공합니다. 블로그, 문서 사이트, 포트폴리오, 마케팅 랜딩 페이지 등 콘텐츠가 비교적 자주 변경되지 않는 웹사이트 구축에 적합합니다.
주요 내용
작동 원리
SSG의 핵심 작업 흐름은 다음과 같습니다.
1. 콘텐츠 작성: 개발자는 주로 마크다운(.md) 파일이나 CMS(Headless CMS 연동)에 콘텐츠를 작성합니다.
2. 템플릿/레이아웃 정의: 페이지의 구조와 디자인을 결정하는 HTML 템플릿(예: React, Vue, Nunjucks 컴포넌트)을 준비합니다.
3. 빌드 실행: build 명령어를 실행하면 SSG가 모든 콘텐츠와 데이터를 읽어, 정의된 템플릿과 결합하여 각 페이지에 해당하는 완전한 정적 HTML 파일을 생성합니다.
4. 배포: 생성된 정적 파일들을 Netlify, Vercel, GitHub Pages, AWS S3 등의 호스팅 서비스에 업로드하여 웹사이트로 서비스합니다.
주요 장점
- 뛰어난 성능: 사전 렌더링된 정적 파일을 제공하므로 초기 로딩 속도가 매우 빠르고, TTFB(Time To First Byte)가 짧습니다.
- 높은 보안: 서버 사이드 코드 실행이나 데이터베이스 연결이 없어 공격 표면(Attack Surface)이 크게 줄어듭니다.
- 쉬운 배포와 확장: 생성된 파일만 호스팅하면 되므로 배포가 간단하며, CDN 캐싱과 결합 시 트래픽 급증에도 쉽게 대응할 수 있습니다.
- 비용 효율적: 정적 파일 호스팅은 대체로 서버리스 아키텍처를 사용하거나 저렴한 서비스를 이용할 수 있어 운영 비용이 낮습니다.
대표적인 SSG 도구
- Next.js: React 기반의 풀스택 프레임워크로, SSG 기능(
getStaticProps, getStaticPaths)을 강력히 지원합니다.
- Gatsby: React와 GraphQL을 중심으로 한 SSG로, 풍부한 플러그인 생태계가 특징입니다.
- Nuxt.js: Vue.js 생태계의 메타 프레임워크로, 유연한 SSG 생성 방식을 제공합니다.
- Hugo: Go 언어로 작성되어 빌드 속도가 매우 빠른 SSG입니다.
- Jekyll: Ruby 기반의 오래되고 안정적인 SSG로, GitHub Pages와의 통합이 원활합니다.
- Astro: "Islands Architecture"를 채택하여 정적 사이트에 최소한의 자바스크립트만 보내는 현대적인 SSG입니다.
SSG의 한계와 해결 방안
SSG의 주요 한계는 콘텐츠가 업데이트될 때마다 전체 사이트를 다시 빌드해야 한다는 점입니다. 대규모 사이트에서는 빌드 시간이 길어질 수 있습니다. 이를 해결하기 위해 증분 빌드(Incremental Builds) 나 온디맨드 빌드(On-demand Builders) 기술이 도입되고 있으며, 정적 사이트에 동적 기능(댓글, 검색, 개인화)을 추가하기 위해 클라이언트 사이드 JavaScript나 서버리스 함수(Serverless Functions) 를 결합하는 Jamstack 아키텍처가 널리 사용됩니다.
최신 동향 (2024-2025년 기준)
- 하이브리드 렌더링의 부상: Next.js, Nuxt.js, Astro 등의 프레임워크는 SSG, SSR, CSR을 상황에 따라 혼합하여 사용할 수 있는 하이브리드 렌더링 모델을 표준으로 채택하고 있습니다. 이는 정적 페이지의 장점과 동적 콘텐츠의 유연성을 모두 취할 수 있게 합니다.
- 부분적(Partial) 또는 증분적(Incremental) 정적 재생성(ISR)의 발전: 변경된 페이지만 재빌드하거나, 특정 주기마다 백그라운드에서 페이지를 재생성하여 빌드 시간 문제를 해결하고 항상 최신 콘텐츠를 유지하는 기술이 핵심 기능으로 자리잡았습니다.
- 에지 컴퓨팅과의 통합: Vercel, Netlify 등의 플랫폼은 SSG로 생성된 정적 사이트를 글로벌 에지 네트워크에 배포하고, 에지에서 실행되는 서버리스 함수를 통해 동적 기능을 처리하는 통합 솔루션을 제공하며 성능과 개발자 경험을 극대화하고 있습니다.
- 콘텐츠 플랫폼 연계 강화: Notion, Airtable, Sanity, Contentful 등의 다양한 데이터 소스를 SSG 빌드 프로세스에 쉽게 통합할 수 있는 도구와 플러그인이 확대되고 있습니다.
관련 주제
- [[Jamstack]]
- [[Next.js]]
- [[Headless CMS]]
---
AI 자동 생성 문서 · 커뮤니티가 함께 개선합니다