개념 설명: fallback 옵션의 정의
fallback 옵션은 빌드 시점에 getStaticPaths에서 정의되지 않은 경로로 사용자가 접속했을 때, Next.js가 어떻게 반응할지를 결정하는 설정.
- 목적: 수천, 수만 개의 페이지를 모두 빌드 시점에 생성하기 어려울 때, 서버 부하와 빌드 시간을 관리하며 정적 페이지의 이점을 취하기 위함.
- 작동 방식: 요청된 경로의 사전 존재 여부에 따라 404 페이지 노출, 임시 로딩 페이지 제공, 또는 서버 사이드 렌더링 후 정적 파일 저장을 결정함.
옵션별 상세 분석 및 사용 상황
① fallback: false
- 작동 방식: 빌드 시점에
paths에 포함되지 않은 경로로 접속 시 즉시 404 에러 페이지를 반환함. - 사용 상황: 데이터의 양이 적고, 새로운 페이지가 자주 추가되지 않는 서비스에 적합. (예: 개인 포트폴리오, 고정된 회사 소개 페이지)
- 특징: 모든 유효한 경로가 빌드 시점에 생성되어야 하므로 보안상 안전하고 예측 가능함.
② fallback: true
- 작동 방식: 미생성 경로 접속 시 fallback UI(로딩 화면)를 먼저 보여줌. 그동안 백그라운드에서 정적 페이지를 생성하고, 완료되면 해당 페이지를 캐싱하여 이후 사용자에게 제공함.
- 사용 상황: 대규모 커머스, 소셜 미디어 등 페이지 수가 방대하여 전체 빌드가 불가능한 경우에 적합.
- 특징: 사용자에게 빠른 응답(로딩 화면)을 주지만, 클라이언트 측에서
router.isFallback을 활용한 별도의 데이터 부재 처리 로직이 필수임.
③ fallback: "blocking"
- 작동 방식: 미생성 경로 접속 시 로딩 화면 없이 서버 사이드 렌더링(SSR)처럼 대기함. 페이지 생성이 완료된 후에야 브라우저에 화면을 전달하며, 이후 요청을 위해 정적으로 캐싱함.
- 사용 상황: SEO(검색 엔진 최적화)가 매우 중요하거나, 사용자에게 로딩 화면 대신 완성된 화면만 보여주고 싶을 때 적합.
- 특징: 사용자가 첫 렌더링 시까지 기다려야 하지만, 생성 후에는 SSG와 동일하게 매우 빠르게 동작함.
기본 문법
getStaticPaths 리턴값에 옵션을 명시하고, true 사용 시 컴포넌트 내부 분기 처리가 핵심임.
// getStaticPaths 설정 예시
export async function getStaticPaths() {
return {
paths: [{ params: { id: '1' } }],
fallback: true // 또는 false, 'blocking'
};
}
// fallback: true일 때 컴포넌트 대응
import { useRouter } from 'next/router';
export default function Page({ data }) {
const router = useRouter();
// 아직 데이터가 없는 상태 처리
if (router.isFallback) {
return <div>데이터를 불러오는 중...</div>;
}
return <div>{data.title}</div>;
}
자주 하는 실수
- fallback: true 사용 시 조건부 렌더링 누락:
props로 넘어올 데이터가 아직 존재하지 않는 'fallback 상태'를 체크하지 않아undefined참조 에러 발생. - SEO를 고려하지 않은 true 선택: 크롤러가 로딩 화면만 수집할 위험이 있으므로, 중요 페이지는
blocking이나 사전 빌드(paths 포함) 처리가 유리함. - 데이터 업데이트 주기 무시:
fallback으로 생성된 페이지는 기본적으로 캐싱됨. 최신 데이터 반영이 필요하다면revalidate옵션(ISR)과 병행 사용 권장.
핵심 요약
- 서비스 규모와 SEO 우선순위에 따른 전략적 fallback 옵션 선택 필수.
true사용 시isFallback분기 로직을 통한 런타임 에러 방지 적합.- 효율적인 빌드 시간 관리와 최적의 사용자 경험 제공을 위한 필수 도구임.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
