Prefetching

📘 Official Docs

• Next.js - Prefetching

Prefetching은 사용자가 실제로 Route를 이동하기 전에 이동할 가능성이 있는 Route의 리소스를 미리 준비하는 성능 최적화 방식이다.

Next.js에서는 주로 Link 컴포넌트를 이용해 자동 Prefetching을 수행하며,
필요한 경우 router.prefetch()를 이용해 직접 Prefetching을 실행할 수도 있다.

Prefetching의 핵심 목적은 초기 로딩을 빠르게 하는 것보다는 이후 Navigation 과정에서 발생하는 대기 시간을 줄이는 것에 있다.

1. Prefetching이 필요한 이유

Prefetching이 없는 일반적인 Route 이동은 사용자가 링크를 클릭한 이후 필요한 Route를 요청한다.

사용자 Click
     ↓
Route 요청
     ↓
응답 대기
     ↓
필요한 리소스 처리
     ↓
화면 전환

사용자가 클릭한 이후 요청과 처리가 시작되기 때문에 네트워크 상태나 서버 처리 시간에 따라 페이지 이동이 지연될 수 있다. Prefetching은 이러한 대기 시간을 줄이기 위해 사용자가 이동하기 전에 Route를 백그라운드에서 미리 준비한다.

Route Prefetch
      ↓
사용자 Click
      ↓
준비된 정보 사용
      ↓
빠른 화면 전환

따라서 사용자가 실제로 페이지를 이동하는 시점에는 이미 필요한 정보의 일부 또는 전체가 준비되어 있을 수 있다.

일반 페이지 이동 vs Prefetching

구분	일반 이동	Prefetching
요청 시점	주로 클릭 이후	일부 리소스를 클릭 전
대기 시간	발생할 수 있음	줄어들 수 있음
UX	전환 대기 가능	더 빠른 전환 기대

Next.js 페이지 전환이 SPA처럼 느껴지는 핵심 이유 중 하나다.

Code Splitting과 Prefetching

Prefetching을 이해하려면 Code Splitting과의 차이를 함께 이해하는 것이 좋다.
Next.js는 Route를 기준으로 애플리케이션 코드를 분리하여 처음부터 모든 Route의 JavaScript를 한 번에 클라이언트로 전달하지 않는다.

전체 애플리케이션
├─ /home
│   └─ 필요한 코드
│
├─ /posts
│   └─ 필요한 코드
│
└─ /mypage
    └─ 필요한 코드

현재 /home에 접속한 사용자가 있다면 초기 로딩에서는 현재 Route에 필요한 리소스를 우선적으로 처리할 수 있다. 이러한 구조를 통해 초기 로딩 시 불필요한 JavaScript 전달을 줄일 수 있다.

하지만 Code Splitting으로 Route를 나누면 사용자가 아직 방문하지 않은 Route의 리소스는 필요할 때 새롭게 가져와야 한다. Prefetching은 이 부분을 보완한다.

• Code Splitting → 처음부터 모든 Route를 로드하지 않음 → 초기 로딩 부담 감소
• Prefetching → 이동 가능성이 있는 Route를 미리 준비 → Navigation 대기 시간 감소

즉, Code Splitting은 초기 로딩 비용을 줄이고,
Prefetching은 이후 페이지 이동에서 발생하는 대기 시간을 줄이는 역할을 한다.

2. Automatic Prefetching

Next.js의 Link 컴포넌트는 Prefetching을 지원한다.

import Link from "next/link";

export default function Page() {
  return <Link href="/posts/1">게시글 보기</Link>;
}

Production 환경에서 Link가 사용자의 Viewport에 들어오는 등의 조건을 만족하면 Next.js는 해당 Route를 백그라운드에서 미리 준비할 수 있다.

<Link href="/posts/1" />
          ↓
Viewport 진입
          ↓
Route Prefetch
          ↓
사용자 Click
          ↓
Client-side Navigation

사용자가 실제 링크를 클릭하기 전에 Route가 준비되기 때문에 빠른 페이지 전환이 가능해진다.

Production 환경에서 동작

자동 Prefetching은 Production 환경에서 활성화된다.
따라서 실제 Prefetching 동작을 확인하려면 Production Build로 실행하는 것이 좋다.

개발 환경에서는 개발 편의성과 불필요한 요청 방지를 위해 Production과 동일한 Prefetching 동작을 확인하기 어려울 수 있다.

3. Page Router의 Prefetching

Page Router에서도 Link를 이용한 자동 Prefetching을 사용할 수 있다.

import Link from "next/link";

export default function Page() {
  return <Link href="/posts/1">게시글 보기</Link>;
}

Page Router의 Link는 연결된 Route에 필요한 페이지 코드와 데이터를 미리 준비하여 Client-side Navigation 속도를 개선한다.

pages
├─ index.tsx
├─ posts
│   └─ [id].tsx
└─ mypage.tsx

예를 들어 /posts/1로 이동하는 Link가 있다면 Next.js는 해당 페이지에 필요한 리소스를 미리 준비할 수 있다.

Programmatic Prefetching

Link를 사용하지 않는 Programmatic Navigation에서는 router.prefetch()를 이용해 Route를 직접 미리 준비할 수 있다.

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

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

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

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

  return <button onClick={handleClick}>Dashboard</button>;
}

Link가 자동으로 Prefetching을 처리해 주는 경우에는 별도로 router.prefetch()를 사용할 필요가 없는 경우가 많다.

Prefetching 비활성화

Page Router의 Link에서는 prefetch={false}를 이용해 Viewport 기반 Prefetching을 비활성화할 수 있다.

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

다만 Page Router에서는 prefetch={false}를 사용해도 Hover 시 Prefetch가 발생할 수 있다.
따라서 Page Router와 App Router의 prefetch={false} 동작에는 차이가 있다.

4. App Router의 Prefetching

App Router에서도 Link를 이용해 Route를 자동 Prefetch할 수 있다.

import Link from "next/link";

export default function Page() {
  return <Link href="/posts/1">게시글 보기</Link>;
}

App Router에서는 Server Component를 사용하기 때문에 Prefetching 대상이 단순히 JavaScript Bundle만을 의미하지 않는다. Route에 따라 다음과 같은 정보가 미리 준비될 수 있다.

Route
├─ RSC Payload
├─ Client Component JavaScript
└─ Route 렌더링에 필요한 정보

Prefetch 범위는 Route가 Static인지 Dynamic인지에 따라 달라질 수 있다.

Prefetching이 항상 데이터까지 전부 가져오는 것은 아니다.
(라우터 / fetch 방식 / 캐시 전략에 따라 다름)

Static Route

정적으로 준비할 수 있는 Route는 전체 Route를 Prefetch할 수 있다.

Link가 Viewport에 진입
        ↓
전체 Route Prefetch
        ↓
사용자 Click
        ↓
준비된 Route 사용

ex.

app
└─ about
   └─ page.tsx

/about이 Static Route라면 Next.js는 해당 Route를 미리 준비하여 이후 Navigation에 활용할 수 있다.

Dynamic Route

Dynamic Route는 요청 시점에 서버 작업이 필요할 수 있기 때문에 항상 전체 Route가 미리 준비되는 것은 아니다.

app
└─ blog
   └─ [slug]
      ├─ page.tsx
      └─ loading.tsx

기본 Prefetch 동작에서는 loading.tsx와 같은 Loading Boundary가 존재할 경우 해당 Boundary까지의 Route 일부를 미리 준비할 수 있다.

Shared Layout
      +
Loading UI
      ↓
미리 Prefetch

실제 Dynamic Content
      ↓
Navigation 이후 서버에서 처리

이를 통해 전체 Dynamic Route가 준비될 때까지 아무 화면도 보여주지 않고 기다리는 대신, 준비된 Layout이나 Loading UI를 먼저 활용할 수 있다.

prefetch 옵션

App Router의 Link에서는 prefetch 값을 이용해 Prefetch 동작을 제어할 수 있다.

<Link href="/dashboard">Dashboard</Link>

기본값은 자동 동작이며 Route 특성에 따라 Prefetch 범위가 달라진다.

• Static Route → 전체 Route Prefetch 가능
• Dynamic Route → loading.tsx Boundary까지 Partial Prefetch 가능

전체 Route를 명시적으로 Prefetch하도록 설정할 수도 있다.

<Link href="/dashboard" prefetch={true}>
  Dashboard
</Link>

반대로 Prefetching을 완전히 비활성화할 수도 있다.

<Link href="/dashboard" prefetch={false}>
  Dashboard
</Link>

App Router에서 prefetch={false}를 사용하면 Viewport 진입이나 Hover에 의한 자동 Prefetching이 수행되지 않는다.

5. Client-side Router Cache

App Router에서는 Prefetching이나 Navigation 과정에서 가져온 RSC Payload와 Route Segment 정보를 Client-side Router Cache에 저장하고, 이후 Navigation에서 재사용할 수 있다.

따라서 이미 Prefetch되었거나 방문했던 Route로 다시 이동할 때 캐시된 정보를 활용해 불필요한 요청과 Navigation 대기 시간을 줄일 수 있다.

다만 Cache의 유지 범위와 시간은 Route 특성이나 Next.js 버전 및 설정에 따라 달라질 수 있다.

6. App Router의 Manual Prefetching

App Router에서도 router.prefetch()를 이용해 Route를 직접 Prefetch할 수 있다.

"use client";

import { useRouter } from "next/navigation";

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

  const handlePrefetch = () => {
    router.prefetch("/pricing");
  };

  return <button onMouseEnter={handlePrefetch}>Pricing</button>;
}

이 방식은 다음과 같은 경우 사용할 수 있다.

• Viewport 밖에 있는 Route를 미리 준비하고 싶은 경우
• Hover 시점에만 Prefetch하고 싶은 경우
• 특정 사용자 행동 이후 Prefetch하고 싶은 경우
• 분석 데이터를 바탕으로 다음 Route를 예측할 수 있는 경우

일반적인 링크 이동에서는 Link의 자동 Prefetching을 우선 사용하고, 기본 동작만으로 부족한 경우 Manual Prefetching을 고려하는 것이 좋다.

Hover 기반 Prefetching

Viewport에 들어오는 모든 Link를 미리 가져오는 대신 사용자가 실제로 관심을 보인 Link만 Prefetch하도록 구현할 수도 있다.

"use client";

import { useRouter } from "next/navigation";

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

  return (
    <button
      onMouseEnter={() => router.prefetch("/pricing")}
      onClick={() => router.push("/pricing")}
    >
      Pricing
    </button>
  );
}

이 방식은 불필요한 Prefetch 요청을 줄이면서 사용자가 실제로 이동할 가능성이 높아진 시점에 Route를 미리 준비할 수 있다는 장점이 있다.

7. Prefetching 비활성화

Prefetching이 항상 필요한 것은 아니다.

다음과 같은 경우에는 Prefetch 범위를 줄이거나 비활성화를 고려할 수 있다.

• 사용자가 이동할 가능성이 매우 낮은 Route
• Link가 매우 많이 존재하는 화면
• 네트워크 사용량을 줄여야 하는 경우
• 사용자의 행동 이후에만 의미가 생기는 Route

Prefetch를 제한하면 불필요한 네트워크 요청을 줄일 수 있지만,
실제 Navigation 시 필요한 정보를 새롭게 가져와야 하므로 대기 시간이 증가할 수 있다.

• Prefetch 적극 활용 → 빠른 Navigation / 네트워크 사용량 증가 가능
• Prefetch 제한 → 네트워크 요청 감소 / Navigation 대기 시간 증가 가능

8. Page Router와 App Router 비교

구분	Page Router	App Router
자동 Prefetch	Link	Link
Manual Prefetch	next/router	next/navigation
주요 Prefetch 대상	페이지 코드 및 관련 데이터	RSC Payload, Client JS 및 Route 정보
Static / Dynamic 구분	있음	Prefetch 범위에 직접적인 영향
Partial Prefetch	제한적	loading.tsx Boundary 활용 가능
prefetch={false}	Viewport Prefetch 비활성화, Hover Prefetch 가능	자동 Prefetch 비활성화

두 Router 모두 Prefetching을 제공하지만 App Router에서는 Server Component와 Streaming 구조가 함께 사용되기 때문에 Prefetching의 역할이 더 Route Segment 중심으로 확장된다.

정리

Next.js의 Prefetching은 사용자가 Route를 이동하기 전에 필요한 정보를 미리 준비하여 Navigation 대기 시간을 줄이는 기능이다.

• Code Splitting → 초기 Route에 필요한 리소스 중심으로 로드 → 초기 로딩 부담 감소
• Prefetching → 이후 이동할 가능성이 있는 Route를 미리 준비 → Navigation 대기 시간 감소

Next.js에서는 Link를 이용한 Automatic Prefetching을 기본적으로 활용할 수 있으며, 필요한 경우 router.prefetch()를 이용해 Manual Prefetching을 수행할 수 있다.

Page Router에서는 페이지 코드와 관련 데이터를 중심으로 Prefetching이 이루어지고, App Router에서는 Server Component 구조를 기반으로 RSC Payload와 Route Segment 등을 활용한다.

특히 App Router에서는 Static Route와 Dynamic Route의 특성, loading.tsx, Client-side Router Cache, Streaming 등이 함께 작동하면서 빠른 Client-side Navigation을 구현한다.

따라서 Prefetching은 초기 로딩 자체를 빠르게 만드는 기능이라기보다, Code Splitting 이후 발생할 수 있는 Route 이동 지연을 줄여주는 Navigation 최적화 전략으로 이해하는 것이 좋다.