[NEXT] 프리패칭(pre-fetching)

✅ 프리패칭(pre-fetching)이란?

사용자가 현재 보고 있는 페이지에서 이동 가능한 다른 페이지들의 리소스(JS bundle)를 미리 백그라운드에서 불러오는 기능을 말합니다.

이렇게 사전에 필요한 데이터를 준비해두면, 사용자가 실제로 링크를 클릭해 페이지를 이동할 때 지연 없이 즉시 전환이 가능해져 사용자 경험이 향상됩니다.

Next.js에서는 next/link 컴포넌트를 사용할 경우, 뷰포트에 들어오는 링크에 대해 해당 경로의 JS 번들을 자동으로 프리패치해주는 기능이 기본으로 제공됩니다.

---

🔄 Next.js의 페이지 전환 흐름과 프리패칭 동작 구조

페이지를 이동할 때 별도로 서버에 추가 데이터를 요청할 필요가 없기 때문에, 클라이언트 사이드 렌더링 방식의 장점인 빠른 페이지 전환을 그대로 누릴 수 있습니다.

---

강제 프리패칭

Next.js에서 router.prefetch(path)는 해당 경로(/test)의 JS 번들를 백그라운드에서 미리 로드해두는 함수입니다.

강제 프리패칭 사용법

useEffect(() => {
  router.prefetch("/test");
}, []);

• 이 코드는 컴포넌트가 마운트될 때 한 번만 실행됨
• /test 경로의 JS 리소스를 백그라운드에서 미리 받아둠

---

프리패칭 비활성화

Next.js에서는 next/link의 prefetch 속성을 false로 설정하여, 특정 링크에 대해 프리패칭을 비활성화할 수 있습니다.
이를 통해 불필요한 JS 번들 다운로드를 제어할 수 있습니다.

프리패칭 비활성화 사용법

<Link href="/about" prefetch={false}>
  About
</Link>

• 이 경우, /about 페이지는 자동 프리패칭되지 않음