정정지용
기술스택 목록
인프라

Static Site Generation

프로젝트 1개에서 사용했습니다. 각 프로젝트에서 어떤 역할로 썼는지 아래에 정리했습니다.

이 기술은 무엇인가요?

빌드 시점에 HTML을 미리 생성해 정적 파일로 배포하는 웹사이트 구축 방식

Static Site Generation(SSG)은 요청이 들어올 때마다 서버에서 페이지를 렌더링하는 대신, 빌드 시점에 콘텐츠와 템플릿을 조합해 완성된 HTML/CSS/JS 파일을 미리 만들어두는 방식이다. 서버 사이드 렌더링이 매 요청마다 연산을 반복해 응답 속도와 서버 비용 부담이 커지는 문제를 해결하기 위해 등장했다. 생성된 결과물은 별도의 애플리케이션 서버 없이 정적 파일만으로 동작하므로 CDN이나 정적 호스팅 서비스에 그대로 배포할 수 있다. 콘텐츠가 자주 바뀌지 않는 문서, 블로그, 마케팅 페이지 등에서 특히 많이 쓰인다.

이럴 때 사용합니다

  • 페이지 콘텐츠가 자주 바뀌지 않고 방문자마다 다른 응답이 필요 없을 때
  • 빠른 초기 로딩 속도와 SEO 최적화가 중요한 페이지를 만들 때
  • 서버 운영 비용 없이 정적 호스팅만으로 배포하고 싶을 때
  • 트래픽이 몰려도 서버 부하 걱정 없이 안정적으로 서비스하고 싶을 때

핵심 개념

Build Time
사용자가 접속하는 시점이 아니라 개발자가 빌드 명령을 실행하는 시점에 페이지가 미리 렌더링된다.
Static Assets
빌드 결과물은 HTML, CSS, JS, 이미지 등 순수 파일 형태로 만들어져 별도의 서버 실행 로직 없이 그대로 제공된다.
Data Fetching at Build Time
외부 API나 CMS, 파일 시스템에서 데이터를 미리 가져와 페이지에 주입한 뒤 정적 파일로 굳힌다.
CDN Hosting
생성된 정적 파일은 전 세계 엣지 서버(CDN)에 캐싱·배포되어 지연 시간이 짧고 서버 부하가 거의 없다.
Rebuild / Redeploy
콘텐츠가 바뀌면 서버가 자동으로 반영하는 게 아니라 다시 빌드하고 재배포해야 최신 내용이 노출된다.

정적 빌드 산출물 생성 및 배포

빌드 명령으로 페이지를 미리 렌더링해 out/ 디렉터리에 정적 파일을 만들고, 이를 그대로 호스팅 서버에 올려 배포한다.

Shell
# 정적 사이트로 빌드하여 out/ 디렉터리에 산출물 생성
npm run build

# 빌드 결과 확인 (HTML, CSS, JS 등 정적 파일)
ls out/

# 정적 호스팅 서비스에 배포 (예시)
npx serve out/

처음 쓸 때 흔한 함정

  • 콘텐츠를 수정해도 재빌드·재배포 전까지는 사이트에 반영되지 않는다.
  • 페이지 수가 매우 많으면 빌드 시간이 길어질 수 있다.
  • 로그인 후 개인화된 콘텐츠처럼 요청마다 달라지는 화면에는 적합하지 않다.

위 개요는 기술 학습을 돕기 위해 자동 생성된 일반 설명입니다. 정확한 사양과 최신 정보는 공식 문서를 확인하세요.

프로젝트별 활용 방식

위 개념이 실제 프로젝트에서 어떻게 쓰였는지 보여줍니다.

함께 사용한 기술

위 프로젝트들에서 같이 쓰인 다른 기술입니다.

Next.jsTypeScript