Antigravity Agent
3.7 KiB
3.7 KiB
Static Site Generation (SSG)
📌 Brief Summary
정적 사이트 생성(SSG, Static Site Generation)은 사용자 요청 시점이 아닌 사이트 빌드(Build) 시점에 HTML 페이지를 미리 생성하는 웹사이트 렌더링 아키텍처입니다 [1]. 완성된 정적 파일은 CDN을 통해 사용자에게 즉각적으로 전송되므로, 서버 처리 시간을 단축하여 번개처럼 빠른 로딩 속도를 제공합니다 [1-3]. 압도적인 웹 성능과 검색 엔진 최적화(SEO) 효율을 제공하지만, 실시간으로 자주 변경되는 콘텐츠에는 적합하지 않은 특성이 있습니다 [2, 3].
📖 Core Content
- 렌더링 작동 원리: SSG는 브라우저가 요청할 때마다 서버가 HTML을 생성하는 대신, 배포 전 빌드 단계에서 미리 모든 HTML 파일을 구성합니다 [1, 4]. 이후 사용자가 접근하면 CDN(콘텐츠 전송 네트워크)을 통해 사전 렌더링된 정적 파일을 지연 없이 즉시 제공합니다 [1, 2].
- 성능 및 Core Web Vitals 최적화: 서버 측의 연산 대기 시간이 없기 때문에, 최초 콘텐츠 페인트(FCP)와 상호작용 시작 시간(TTI) 지표에서 매우 뛰어나고 일관된 성능을 보입니다 [5-7]. 이는 구글의 최신 웹 성능 지표인 Core Web Vitals의 LCP(Largest Contentful Paint)를 개선하는 핵심 전략으로 꼽힙니다 [8, 9].
- SEO(검색 엔진 최적화) 극대화: 클라이언트 사이드 렌더링(CSR) 환경에서는 검색 엔진 봇(Googlebot)이 자바스크립트를 실행해야만 콘텐츠를 볼 수 있어 색인 지연 문제가 발생합니다 [10, 11]. 반면 SSG는 이미 완전히 렌더링된 HTML 텍스트 및 메타데이터를 즉각적으로 크롤러에게 제공하므로 최고의 크롤링 접근성과 SEO 점수를 보장합니다 [4, 12-14].
- 가장 적합한 사용 사례: 실시간 데이터 변동이 적고 빠른 정보 전달이 중요한 공식 문서(Documentation), 블로그, 랜딩 페이지, 마케팅 웹사이트를 구축할 때 가장 이상적인 방식입니다 [1, 2, 4, 12].
- 아키텍처의 한계: 콘텐츠가 업데이트될 때마다 사이트 전체를 다시 빌드하고 배포해야 한다는 단점이 있습니다 [3]. 실시간 개인화 기능이나, 수만~수십만 개의 페이지를 보유한 대규모 사이트의 경우 빌드 시간이 기하급수적으로 늘어나는 치명적인 제약이 있습니다 [2, 4].
- 모던 웹 프레임워크 지원: Next.js, Gatsby, Hugo, Jekyll 등의 최신 프레임워크에서 SSG를 기본적으로 지원합니다 [1, 15, 16]. 최근에는 이러한 SSG의 한계를 극복하기 위해, 정적 페이지에는 SSG를 사용하고 최신 정보가 필요한 페이지에는 SSR(서버 사이드 렌더링)이나 ISR(증분 정적 재생성)을 결합하는 '하이브리드 렌더링' 아키텍처가 최우선 모범 사례로 활용되고 있습니다 [17].
🔗 Knowledge Connections
- Related Topics: Server-Side Rendering (SSR), Client-Side Rendering (CSR), Incremental Static Regeneration (ISR), Core Web Vitals, Search Engine Optimization (SEO)
- Projects/Contexts: Next.js, Gatsby, Content Delivery Network (CDN)
- Contradictions/Notes: 소스에 따르면 SSG는 성능과 SEO 측면에서 최상의 결과를 보장하지만, 실시간 개인화(Personalization) 경험을 제공하거나 수시로 데이터가 바뀌는 거대한 웹 앱에서는 단독으로 사용할 수 없는 명확한 한계를 가집니다. 따라서, 최신 아키텍처에서는 SSG의 속도와 SSR의 신선도를 결합한 ISR 방식을 대안으로 추천하고 있습니다 [2, 18, 19].
Last updated: 2026-04-26