1️⃣ getStaticProps란?
📦 정의:
getStaticProps는 Next.js의 데이터 패칭 함수로, 빌드 타임에 데이터를 가져와 정적 페이지(Static Page)를 생성하는 역할을 함.
🔍 주요 특징:
-
빌드 타임에 실행 → 정적 HTML로 생성되어 페이지 로딩 속도가 매우 빠름
-
서버에서만 실행 → 클라이언트 사이드에서는 접근 불가능
-
CDN 캐싱 최적화 → 퍼포먼스 향상 (SEO에도 유리)
2️⃣ getStaticProps의 동작 흐름
-
빌드 타임에 Next.js가
getStaticProps를 호출 -
반환된
props가 해당 페이지 컴포넌트로 전달됨 -
페이지가 정적 HTML로 사전 렌더링됨
-
클라이언트가 페이지 요청 시, 미리 생성된 정적 페이지를 즉시 응답함
3️⃣ getStaticProps를 페이지 컴포넌트에 두는 이유
| ✅ (페이지 컴포넌트) | ⚠️ (프레젠테이셔널 컴포넌트) |
|---|---|
| Next.js의 페이지 레벨 함수에서만 동작 | 일반 컴포넌트에서는 작동하지 않음 (Next.js 제한 사항) |
getStaticProps로 받은 데이터가 props로 전달됨 | 데이터 패칭 로직이 없음 → 주로 UI 렌더링 전담 |
| Next.js가 빌드 시 자동으로 호출함 | 호출되지 않음 → 빌드 타임에 데이터 패칭 불가능 |
✅ Next.js 공식 규칙:
getStaticProps는pages/디렉토리 내부의 컴포넌트에서만 사용 가능- 이유: Next.js의 라우팅 시스템이 페이지 단위로 사전 렌더링을 관리하기 때문
4️⃣ getStaticProps vs getServerSideProps
✅ getStaticProps (권장) | ⚡ getServerSideProps |
|---|---|
| 빌드 타임에 한 번만 실행 | 매 요청마다 실행 (서버 부하 증가) |
| 빠른 페이지 로딩 속도 (정적 페이지) | 요청이 많을수록 성능 저하 가능 |
| 캐싱 및 CDN 최적화 가능 | 캐싱 어려움, API 호출이 많은 경우 서버 부담 증가 |
| 정적 데이터 (아이콘 목록, 블로그 게시글 등)에 적합 | 실시간 데이터(로그인 세션, 대시보드 API 데이터 등)에 적합 |
