프리페칭(Pre-fetching)

박상훈·2025년 4월 11일

nextjs pre-fetching 프리페칭

Next.js 프리페칭(Pre-fetching) 기능 사용법

프리페칭(Pre-fetching)은 현재 사용자가 보고 있는 페이지에서 이동 가능한 페이지의 데이터를 미리 불러오는 기능입니다. 페이지 이동 시 로딩 지연을 최소화하고 즉각적인 페이지 전환을 제공합니다.

📌 기본 개념 및 특징

사용자가 현재 페이지에서 접근 가능한 페이지의 데이터를 사전에 불러옴으로써 페이지 전환이 매우 빨라집니다.
개발 모드(npm run dev) 에서는 프리페칭이 실행되지 않습니다.
Next.js에서는 <Link> 컴포넌트를 사용할 때 기본적으로 프리페칭이 활성화됩니다.

📌 기본적인 프리페칭 사용법

Next.js에서 프리페칭을 사용하는 두 가지 기본 방법이 있습니다:

1️⃣ Link 컴포넌트로 자동 프리페칭 (기본값: 활성화)

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

위와 같이 href 속성을 가진 모든 <Link> 태그는 자동으로 /about 페이지를 프리페칭합니다.
특정 링크에서 프리페칭을 원하지 않으면, 아래처럼 prefetch={false}로 설정할 수 있습니다:

<Link href="/search" prefetch={false}>
  Search 페이지 (프리페칭 비활성화)
</Link>

2️⃣ Router 객체를 사용하여 수동 프리페칭하기

특정 이벤트(예: 버튼 클릭, 마우스 호버 등)나 조건에 따라 특정 페이지를 미리 불러올 수 있습니다.

예시 코드:

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

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

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

  const handleClick = () => {
    router.push("/test");
  };

  return <button onClick={handleClick}>Test 페이지로 이동</button>;
}

위 코드는 컴포넌트 마운트 시 /test 페이지를 미리 불러와서, 버튼 클릭 시 빠른 페이지 전환을 지원합니다.

📌 최적화 및 권장 추가 요소

다음과 같은 요소들을 추가하여 프리페칭의 효율성을 높이고 사용자 경험을 향상시킬 수 있습니다.

🔹 선택적 이벤트 기반 프리페칭

모든 페이지를 항상 프리페칭하면 리소스 낭비가 될 수 있으므로, 사용자의 행동(예: 마우스 호버)을 기반으로 선택적으로 프리페칭하는 것이 권장됩니다.

예시 코드(마우스 호버로 프리페칭):

import { useRouter } from "next/router";

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

  const handleMouseEnter = () => {
    router.prefetch("/hover-page");
  };

  return (
    <a
      onMouseEnter={handleMouseEnter}
      onClick={() => router.push("/hover-page")}
    >
      마우스 호버 시 프리페칭되는 페이지로 이동
    </a>
  );
}

🔹 예외적인 페이지 프리페칭 관리 (많이 방문하는 페이지에만 적용)

구글 애널리틱스 등 사용자 행동 데이터를 참고하여, 자주 방문하는 페이지를 미리 불러오도록 전략적으로 프리페칭을 설정하면 효율적입니다.

📌 전체 코드 예시 (가독성 향상 버전)

파일명: pages/_app.js

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

export default function App({ Component, pageProps }) {
  const router = useRouter();

  // 특정 페이지 사전 프리페칭 (useEffect 활용)
  useEffect(() => {
    router.prefetch("/test");
  }, [router]);

  // 버튼 클릭 시 페이지 이동
  const handleTestPageClick = () => {
    router.push("/test");
  };

  return (
    <>
      <header>
        <nav>
          <Link href="/">Home</Link>
          <span>&nbsp;|&nbsp;</span>

          <Link href="/search" prefetch={false}>
            Search (프리페칭 비활성화)
          </Link>
          <span>&nbsp;|&nbsp;</span>

          <Link href="/book/1">Book 1 (기본 프리페칭)</Link>
        </nav>

        <div>
          <button onClick={handleTestPageClick}>
            Test 페이지로 이동 (수동 프리페칭)
          </button>
        </div>
      </header>

      <main>
        <Component {...pageProps} />
      </main>
    </>
  );
}