Next.js의 프리페칭(prefetching) 완벽 정리

1. 프리페칭(prefetching)이란?

프리페칭(prefetching)은 Next.js가 사용자가 이동할 가능성이 높은 페이지의 JavaScript 번들(JS bundle)을 미리 다운로드하는 기능입니다.

✅ 이점

• 사용자가 링크를 클릭하기 전에 해당 페이지의 JavaScript 파일을 미리 불러옴
• 따라서 페이지 로딩 속도가 빨라짐 → 즉시 렌더링 가능
• 사용자가 네비게이션을 클릭할 때 네트워크 요청을 기다릴 필요가 없음

🚫 주의점

• 모든 페이지를 무조건 프리페칭하면 안 됨! (불필요한 네트워크 트래픽이 발생)
• 초기 접속 시 많은 데이터를 가져오면 TTI(Time To Interactive, 페이지 반응 시간)가 느려짐
  → 따라서 Next.js는 현재 화면에 보이는 Link 컴포넌트에 한해서 자동으로 프리페칭을 수행함.

---

2. Next.js의 프리페칭 기본 동작 방식

Next.js는 기본적으로 Link 태그에 prefetch 기능을 자동 적용합니다.

📌 예제 1: Link를 사용한 경우 → ✅ 자동 프리페칭

<Link href="/about">About 페이지 이동</Link>

✅ 이 코드가 화면에 나타나면 Next.js가 /about 페이지의 JavaScript 번들을 자동으로 미리 다운로드합니다.

📌 예제 2: prefetch={false} → 🚫 프리페칭 비활성화

<Link href="/search" prefetch={false}>Search</Link>

🚫 프리페칭을 원하지 않는 경우 prefetch={false}를 사용하면 Next.js는 /search 페이지를 미리 로드하지 않습니다.
(사용자가 클릭했을 때만 데이터를 가져옴)

📌 예제 3: <button> 클릭 시 router.push() 사용 → ❌ 자동 프리페칭되지 않음

<button onClick={() => router.push("/test")}>/test 페이지로 이동</button>

❌ Link가 아닌 router.push()는 기본적으로 프리페칭이 적용되지 않음!
따라서 프리페칭을 직접 실행하려면 router.prefetch()를 사용해야 합니다.

---

3. router.prefetch()로 강제 프리페칭 실행

📌 router.prefetch() 예제

import { useRouter } from "next/router";
import { useEffect } from "react";

export default function Page() {
  const router = useRouter();

  useEffect(() => {
    router.prefetch("/test"); // /test 페이지를 미리 불러오기
  }, []);

  return (
    <div>
      <h1>프리페칭 테스트</h1>
      <button onClick={() => router.push("/test")}>/test 페이지로 이동</button>
    </div>
  );
}

✅ useEffect를 사용하여 페이지가 로드될 때 자동으로 /test 페이지의 JS 번들을 다운로드합니다.
✅ 이후 사용자가 버튼을 클릭하면 즉시 페이지가 렌더링됨 (네트워크 요청 X)

---

4. 왜 프리페칭이 필요할까?

Next.js는 기본적으로 현재 페이지에서 필요한 JavaScript 파일만 다운로드합니다.
즉, 다른 페이지로 이동하려고 하면 해당 페이지의 JS 번들을 새롭게 요청해야 하므로 속도가 느려질 수 있습니다.

✅ 프리페칭을 사용하면

• 사용자가 클릭하기 전에 해당 페이지의 JS 파일을 미리 다운로드
• 페이지 이동 시 기다리는 시간 없이 즉시 렌더링 가능
• 특히 SPA(Single Page Application)에서 사용자 경험(UX)이 향상됨

🚫 프리페칭이 과도할 경우 문제점

• 모든 페이지를 한꺼번에 프리페칭하면?
  • 네트워크 부담 증가 (사용자가 이동하지 않을 페이지까지 로드됨)
  • 초기 로딩 속도(TTI)가 느려짐
  • 불필요한 리소스 낭비

따라서 Next.js는 기본적으로 화면에 보이는 Link만 자동 프리페칭합니다.

---

5. Link와 router.prefetch()의 차이점

기능 <Link href="/page"> router.prefetch("/page")

프리페칭 자동 적용 여부	✅ 자동 적용됨	❌ 수동 실행 필요
사용 시점	JSX에서 사용 (<Link>)	JavaScript 코드에서 실행 (useEffect)
SEO 친화적	✅ 검색 엔진이 읽을 수 있음	🚫 검색 엔진이 실행하지 않음
사용 예제	<Link href="/page">Page</Link>	router.prefetch("/page")
클라이언트 사이드 렌더링 지원	✅ 지원	✅ 지원

💡 즉, Link는 자동 프리페칭을 지원하지만, router.push()를 사용할 경우 router.prefetch()를 직접 호출해야 합니다.

---

6. prefetch={false} 언제 사용해야 할까?

프리페칭이 항상 필요한 것은 아닙니다. 오히려 불필요한 페이지까지 프리페칭하면 네트워크 리소스를 낭비할 수 있습니다.

📌 prefetch={false}를 사용해야 하는 경우:

1. 페이지가 무거운 경우
   → 예를 들어, /search 페이지가 API 호출을 많이 하는 경우, 불필요한 데이터를 미리 불러오는 것은 성능 저하를 초래할 수 있음.
2. 사용자가 이동할 가능성이 낮은 경우
   → 특정 버튼 클릭 시 이동하는 페이지는 미리 로드할 필요 없음.
3. 서버 사이드 렌더링(SSR) 페이지
   → getServerSideProps를 사용하는 페이지는 미리 로드하지 않아도 됨.

📌 예제:

<Link href="/search" prefetch={false}>Search 페이지</Link>

🚫 이 코드에서는 /search 페이지가 자동으로 미리 로드되지 않음
✅ 사용자가 클릭했을 때만 데이터를 가져옴.

---

7. 결론: 언제 프리페칭을 사용할까?

상황 프리페칭 필요 여부 추천 방법

네비게이션 바, 메뉴 링크	✅ 필요	<Link> (자동 프리페칭)
버튼 클릭으로 이동	❌ 불필요	router.push()
특정 페이지 미리 로드	✅ 필요	router.prefetch()
무거운 페이지 (getServerSideProps)	❌ 불필요	prefetch={false}

💡 최적의 성능을 위해 적절한 경우에만 프리페칭을 사용하세요!

• 정적인 네비게이션 링크는 ✅ Link 사용 (자동 프리페칭)
• 버튼 클릭 등 이벤트 기반 이동은 ✅ router.push() 사용 (필요 시 router.prefetch() 추가)
• 불필요한 프리페칭 방지를 위해 🚫 prefetch={false} 옵션 사용

---