1. 개념 설명: 페이지 이동의 마법
Next.js에서 프리페칭은 현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지의 데이터를 사전에 불러와 준비해 놓는 기능. 이는 빠른 페이지 이동을 위해 Next.js가 기본으로 제공하는 핵심 성능 최적화 전략의 일환.
원래 Next.js는 사용자가 특정 페이지로 이동을 요청할 때 해당 페이지에 필요한 JS Bundle을 가져오는 방식. 하지만 프리페칭 기능을 사용하면, 사용자가 실제로 클릭하기 이전에 필요한 JS Bundle을 미리 가져와 준비하는 것이 특징. 결과적으로 사용자가 링크를 클릭하는 순간 즉시 페이지 전환이 이루어져, 로딩 시간을 거의 느끼지 못하는 매끄러운 경험 제공.
2. 사용 상황 예시: 빠르고 부드러운 SPA 경험
- 메인 페이지/목록 페이지에서의 활용: 사용자가 둘러볼 가능성이 높은 제품 목록 페이지나 상세 페이지 링크에 적용.
- 예시: 쇼핑몰 메인 화면에서 인기 상품 3가지의 상세 페이지 링크에 프리페칭 적용. 사용자가 해당 상품을 클릭하면 즉각적인 페이지 로딩 가능.
- 헤더/네비게이션 바의 링크: 웹사이트의 핵심 경로(About, Contact, Dashboard 등)에 대한 프리페칭.
- 사용자가 사이트를 탐색하는 동안 어떤 페이지로든 신속하게 이동하는 부드러운 Single Page Application(SPA) 경험 제공.
3. 기본 문법: Link 컴포넌트와 router.prefetch 활용
Next.js에서 프리페칭을 활성화하는 방법은 두 가지 주요 방식.
| 문법 요소 | 기능 설명 |
|---|---|
<Link href="..."> | 기본적으로 Next.js의 Link 컴포넌트를 사용하여 명명된 모든 경로에 대해 자동 프리페칭 활성화. 뷰포트(viewport)에 나타나거나 화면에 마운트(mount)될 때 프리페칭 실행. |
router.prefetch(url) | <Link> 컴포넌트가 아닌 다른 방식으로 프리페칭이 필요한 경우 사용. next/router에서 useRouter 훅을 가져와 특정 경로를 수동으로 프리페칭할 때 활용. |
| 프리페칭 해제 | <Link href="..." prefetch={false}>와 같이 prefetch prop에 false 값 전달을 통한 프리페칭 기능 비활성화. |
4. 자주 하는 실수: 과도한 사용과 의도하지 않은 비활성화
- 불필요한 프리페칭: 모든 링크에 대해 프리페칭을 활성화하는 것은 대역폭 낭비와 서버 부하 유발 가능성. 사용자가 방문할 가능성이 매우 낮은 페이지에 대한 프리페칭은 리소스 낭비.
해결: 실제로 이동 가능성이 높은 핵심 링크에만
<Link>컴포넌트 사용을 제한하거나, 필요한 경우에만router.prefetch를 수동으로 호출하는 것이 적절. - 프리페칭 누락:
<Link>컴포넌트 대신 일반<a>태그를 사용하는 경우 Next.js의 자동 프리페칭 기능 누락 및 클라이언트 측 라우팅 기능 손실.해결: Next.js의 경로 이동에는 항상
<Link>컴포넌트 사용 필요. 스타일링 등을 위해<a>태그가 필요하다면,<Link>컴포넌트의 자식 요소로 사용.
핵심 요약: Next.js 프리페칭의 3가지 핵심
- 목적: 빠른 페이지 이동 경험 제공을 위한 성능 최적화 기능.
- 작동 원리: 이동 요청 전 대상 페이지의 JS Bundle을 미리 가져와 준비.
- 활성화:
<Link>컴포넌트 사용 시 기본 활성화되며,prefetch={false}속성으로 해제 가능.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
