Next.js에서 [id].tsx 같은 동적 경로 페이지에 getStaticProps를 사용할 경우,
필요한 fallback 옵션 정리
fallback 옵션 비교
| fallback 옵션 | undefined path 접근 시 | 최초 요청 | 이후 요청 | SEO |
|---|---|---|---|---|
false | 404 반환 | 빠름 (SSG) | SSG | 좋음 |
blocking | 서버에서 생성 후 반환 | 느림 (1회 SSR) | SSG | 좋음 |
true | 빈 페이지 + 로딩 | 빠름 (레이아웃만) | SSG | 낮음 |
fallback: false
- 정의된 path만 HTML로 사전 생성
- 정의되지 않은 path는 404 Not Found 반환
- 사용 예시: 고정된 블로그 글, 정책 페이지
fallback: blocking
- 정의되지 않은 path 접근 시, 빌드 타임 이후 서버에서 HTML을 실시간 생성
- 생성된 페이지는 캐시에 저장 → 이후부터 SSG처럼 동작
- 사용 예시: SEO가 중요한 상세 페이지 (뉴스, 상품)
fallback: true
- 정의되지 않은 path는 빈 페이지 반환 (레이아웃만 표시 / 로딩 UI 필요)
- 클라이언트는 props 없이 먼저 렌더링 → 이후 서버에서 데이터를 받아 채움
- 사용 예시: 페이지 수가 많은 곳 (커뮤니티, Q&A 게시판)
