← 스터디로 돌아가기← 스터디로 돌아가기
Prefetch 비활성화 데모
대량의 링크가 있는 페이지에서 prefetch={false}로 리소스를 절약할 수 있습니다. 아래 목록에서 링크에 마우스를 올리면 prefetch가 시작되고, 클릭 시 전환이 빨라집니다.
파일 구조
disabling-prefetching/
├── page.tsx ← Server entry
├── HoverPrefetchProducts.tsx ← hover-only prefetch Client logic
└── products/
└── [id]/
└── page.tsx제품 목록 (hover-only prefetch)
체험 포인트: 링크에 hover하기 전에는 prefetch를 막고, hover 이후에만 prefetch를 허용해 네트워크 비용과 체감 성능을 균형 있게 맞춥니다.
핵심 파일 코드
// page.tsx (Server)
import HoverPrefetchProducts from './HoverPrefetchProducts'
const BASE = '/demo/nextjs/16.1.6/linking-and-navigating/disabling-prefetching'
export default function Page() {
return <HoverPrefetchProducts basePath={BASE} />
}
// HoverPrefetchProducts.tsx (Client)
'use client'
const [hasHoverStarted, setHasHoverStarted] = useState(false)
<Link prefetch={hasHoverStarted ? null : false} />