# [[Gatsby]]

## 📌 Brief Summary
Gatsby는 주로 정적 사이트 생성(Static Site Generation, SSG)에 특화된 React 기반의 프레임워크로, SEO 최적화에 매우 뛰어난 성능을 제공합니다. 블로그, 문서(Docs), 마케팅 랜딩 페이지와 같이 콘텐츠가 중심이 되는 웹사이트 구축에 가장 적합하게 설계되었습니다. 초기 로딩 속도(TTFB)가 매우 빠르며, 전용 플러그인 생태계를 통해 검색 엔진이 쉽게 크롤링하고 인덱싱할 수 있도록 돕습니다.

## 📖 Core Content
*   **렌더링 전략 및 SEO 성과**
    Gatsby는 기본적으로 빌드 타임에 HTML을 사전 렌더링하는 SSG(Static Site Generation) 방식을 사용합니다. 검색 엔진 봇이 자바스크립트 실행 없이도 완벽하게 렌더링된 전체 HTML 콘텐츠와 메타데이터를 즉시 수신할 수 있으므로, 뛰어난 크롤링 가능성(Crawlability)을 제공하며 Core Web Vitals 점수를 최고 수준으로 끌어올릴 수 있습니다 [1-3].
*   **성능 지표 및 배포**
    최소 번들 크기가 약 50KB 수준으로 매우 가볍고, 첫 바이트 도달 시간(TTFB)이 20~50ms로 압도적인 속도를 자랑합니다. Netlify나 Gatsby Cloud와 같은 정적 호스팅 플랫폼 배포에 최적화되어 있으며, CI/CD 환경에서는 5분 미만의 빌드 시간을 유지하고 Gatsby Cloud의 증분 빌드(Incremental builds) 기능을 활성화하는 것이 권장됩니다 [1, 4].
*   **특화된 SEO 플러그인 생태계**
    Gatsby 앱을 SEO에 최적화하기 위해서는 전용 플러그인의 활용이 필수적입니다. 이미지 최적화를 위한 `gatsby-image`, 동적 메타 태그 관리를 위한 `gatsby-plugin-react-helmet`, 검색 엔진 발견을 돕는 `gatsby-plugin-sitemap` 및 `gatsby-plugin-robots-txt` 등의 설치 및 구성이 Gatsby 프로젝트의 주요 SEO 베스트 프랙티스입니다 [1, 4].
*   **주요 활용 사례**
    사용자의 세션마다 콘텐츠가 동적으로 변하지 않거나 업데이트 빈도가 낮은 콘텐츠 집약적 사이트(예: 블로그, 가이드 문서, 마케팅 웹사이트 등)에서 가장 강력한 효과를 발휘합니다 [5-7]. 

## 🔗 Knowledge Connections
- **Related Topics:** [[Static Site Generation (SSG)]], [[React]], [[Core Web Vitals]], [[Search Engine Optimization (SEO)]]
- **Projects/Contexts:** [[콘텐츠 중심 웹사이트 구축]], [[블로그 및 문서 페이지 개발]]
- **Contradictions/Notes:** Gatsby는 정적 페이지에 대한 완벽한 SSG 지원으로 SEO에 훌륭하지만, Next.js나 Remix와 달리 서버 사이드 렌더링(SSR)이나 점진적 정적 재생성(ISR)을 자체적으로 지원하지 않으므로, 실시간으로 변하는 고도의 동적 웹 애플리케이션에는 적합하지 않습니다 [1, 6].

---
*Last updated: 2026-04-26*