Static Generation(SSG) — generateStaticParams 완전 정복
📋 실습 안내
✏️ CODE EDITOR (JSX)
▶ 실행 버튼을 눌러 코드를 테스트하세요.
👁️ 내 미리보기
내 코드 실행 결과
🎯 완성 미리보기
목표
위 에디터 코드를 수정해서 이 결과물과 똑같이 만들어보세요!
💡 TODO 주석을 채워서 위 결과물처럼 동작하게 만들어보세요
🤖 AI 선생님에게 질문하기
이번 강의 전용
▼
선생님이 답변 중이에요...
⚠️ 학습 관련 질문만 답변합니다. 관련 없는 질문은 자동으로 학습으로 유도됩니다.
Q1. Next.js App Router에서 `generateStaticParams`가 반환해야 하는 값의 형태는?
💡 App Router의 `generateStaticParams`는 각 동적 세그먼트 이름을 키로 하는 객체의 배열을 반환합니다. Pages Router의 `getStaticPaths`와 달리 `paths`나 `fallback` 래퍼가 없습니다.
Q2. `export const dynamicParams = false`를 설정했을 때, 빌드 타임에 생성되지 않은 경로를 요청하면?
💡 `dynamicParams = false`이면 `generateStaticParams`에서 반환한 경로 외 모든 요청은 404를 반환합니다. 기본값인 `true`일 때는 런타임 SSR로 폴백합니다.
Q3. SSG 페이지를 빌드 타임에 올바르게 생성하기 위한 fetch 옵션은?
💡 `cache: 'force-cache'`가 Next.js에서 SSG처럼 동작하는 기본 캐시 전략입니다. `no-store`는 캐시를 완전히 비활성화해 매 요청마다 새로 fetch(=SSR)합니다.
Q4. 개발 서버(`next dev`)에서 SSG 동작을 테스트하려 할 때 맞는 설명은?
💡 `next dev`는 HMR을 위해 모든 페이지를 요청 시 렌더링합니다. 실제 SSG 동작 확인은 반드시 `next build && next start`로 프로덕션 빌드를 실행해야 합니다.
Q5. 상품이 10만 개인 쇼핑몰에서 SSG를 적용할 때 가장 현명한 전략은?
💡 대규모 콘텐츠에서는 인기 있는 N개만 빌드 타임에 정적 생성하고(`generateStaticParams`), 나머지는 `dynamicParams = true`(기본값)로 첫 요청 시 생성 후 캐시하는 하이브리드 전략이 최적입니다.
😅
아쉽네요!
점수: 0점 — 70점 이상이 되어야 통과합니다.