← 스터디로 돌아가기
Prefetching 데모
Next.js는 <Link> 컴포넌트가 viewport에 들어오면 자동으로 해당 라우트를 prefetch합니다. 아래 링크들을 클릭하면서 브라우저 DevTools의 Network 탭을 확인해보세요.
파일 구조
prefetching/
├── page.tsx ← 현재 페이지 (개념 설명)
├── static/
│ └── page.tsx ← Static 라우트 (빌드 시 렌더링)
└── dynamic/
├── page.tsx ← Dynamic 라우트 (요청 시 렌더링)
└── loading.tsx ← Loading skeleton관찰 포인트: 이 페이지가 로드되면 위 두 링크가 viewport에 들어갑니다. DevTools Network 탭에서 RSC payload가 자동으로 fetch되는 것을 확인하세요. Static 라우트는 전체가, Dynamic 라우트는 loading.tsx 부분만 prefetch됩니다.
핵심 파일 코드
// demo/nextjs/16.1.6/linking-and-navigating/prefetching/page.tsx
export default function Page() {
// 핵심 동작: 실제 파일 구조와 런타임 결과를 함께 확인
}