Dynamic Segments + generateStaticParams 데모

generateStaticParams는 dynamic segment를 빌드 시 미리 렌더링합니다. 아래 카테고리는 빌드 시 생성된 정적 페이지이므로 즉시 전환됩니다.

파일 구조

dynamic-segments/
├── page.tsx                      ← 현재 페이지
└── categories/
    └── [category]/
        └── page.tsx              ← generateStaticParams 사용

사전 생성된 카테고리 (generateStaticParams)

Electronics →Clothing →Books →

generateStaticParams 코드

// categories/[category]/page.tsx

export async function generateStaticParams() {
  return [
    { category: 'electronics' },
    { category: 'clothing' },
    { category: 'books' },
  ];
}

// → 빌드 시 3개 페이지가 미리 생성됨
// → prefetch 시 전체 RSC Payload 전송
// → 네비게이션이 즉시 완료됨

✓ generateStaticParams 사용 시

• 빌드 시 HTML 미리 생성
• 전체 RSC Payload prefetch 가능
• 네비게이션 즉시 완료
• CDN 캐시 활용 가능

✗ generateStaticParams 미사용 시

• 요청 시 서버에서 렌더링
• 부분 prefetch만 가능 (loading.tsx까지)
• 서버 렌더링 대기 시간 발생
• loading.tsx 없으면 빈 화면 대기

체험 포인트: 위 카테고리 링크를 클릭하면 즉시 페이지가 전환됩니다. 이 링크들이 viewport에 들어가는 순간 전체 RSC Payload가 prefetch되기 때문입니다. generateStaticParams가 없었다면 서버 렌더링을 기다려야 했을 것입니다.

핵심 파일 코드

// demo/nextjs/16.1.6/linking-and-navigating/dynamic-segments/page.tsx
export default function Page() {
    // 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}