Dynamic Routes + loading.tsx 데모

Dynamic 라우트에 loading.tsx가 있으면 서버 렌더링을 기다리는 동안 skeleton이 즉시 표시됩니다. 아래 두 블로그 포스트를 클릭해보세요.

파일 구조

dynamic-routes/
├── page.tsx              ← 현재 페이지
└── blog/
    └── [slug]/
        ├── page.tsx      ← 블로그 포스트 (dynamic, 1.5초 지연)
        └── loading.tsx   ← Skeleton UI (즉시 표시)

블로그 포스트

Hello World →Getting Started →

체험 포인트: 링크를 클릭하면 loading.tsx의 skeleton이 즉시 나타납니다. 약 1.5초 후 실제 콘텐츠로 교체됩니다. loading.tsx가 없었다면 1.5초 동안 아무런 시각적 피드백 없이 대기해야 했을 것입니다.

핵심 파일 코드

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