Prefetching

Docs

• Next.js - Prefetching

프리페칭은 빠른 페이지 이동을 위해 Next.js에서 제공하는 성능 최적화 기능이다.
페이지 내의 링크를 기준으로, 사용자가 이동할 가능성이 있는 페이지의 리소스를 사전에 미리 불러와 두는 것을 의미한다.

프리페칭이 필요한 이유

일반적인 페이지 이동 흐름은 다음과 같다.

1. 사용자가 링크 클릭
2. 서버에 요청
3. HTML / JavaScript / 데이터 다운로드
4. 화면 렌더링

이 과정은 클릭 이후에 모든 요청이 시작되기 때문에 페이지 이동 시 항상 대기 시간이 발생한다.

만약 초기 접속 시 모든 페이지에 해당하는 JavaScript 코드를 한 번에 번들링하여 전달하면
다음과 같은 문제가 발생한다.

• JS 번들 크기 증가
• JavaScript 파싱 및 실행 비용 증가
• Hydration 시간 증가
• 결과적으로 TTI(Time To Interactive) 지연

즉, 화면은 보이지만 유저가 실제로 앱과 상호작용할 수 있기까지 시간이 오래 걸리는 문제가 발생한다.

Next.js의 기본 전략: 페이지 단위 코드 분리

Next.js는 위 문제를 해결하기 위해 페이지 단위로 JavaScript 코드를 분리해서 전달한다.

• 최초 접속 시: 현재 페이지에 필요한 JS Bundle만 전송
• 나머지 페이지의 코드: 초기 로딩에서 제외

그 결과:

• 번들 크기 감소
• Hydration 시간 단축
• 초기 로딩 성능 개선

이 구조 자체가 자동 코드 스플리팅이며, Prefetching은 이 구조를 기반으로 동작하는 추가 최적화 전략이다.

Prefetching은 무엇을 더 해줄까?

Next.js는 단순히 코드만 나누는 데서 끝나지 않고, 곧 이동할 가능성이 있는 페이지의 리소스를 미리 로드한다.

import Link from 'next/link';

<Link href='/posts/1'>게시글 보기</Link>;

이 링크가 화면에 노출되면 /posts/1 페이지에 필요한 JavaScript 코드와 관련 리소스를 백그라운드에서 미리 요청한다.
덕분에 페이지 이동 시점에는 추가적인 서버 요청이 거의 필요 없어지고, 클라이언트 사이드 렌더링의 장점처럼 매우 빠른 페이지 전환이 가능해진다.

프리페칭이 동작하는 조건

1. Production 모드에서만 동작

Prefetching은 개발 모드에서는 활성화되지 않는다.

npm run build
npm run start

프로덕션 모드에서 실행해야 실제 프리페칭 동작을 확인할 수 있다.

2. Link 컴포넌트로 명시된 경로만 자동 적용

Prefetching은 기본적으로 Link 컴포넌트로 선언된 경로에 대해서만 자동 수행된다.

<Link href='/search'>Search</Link>

Programmatic Prefetching

버튼 클릭처럼 프로그래머틱한 이동의 경우 자동 프리페칭은 이루어지지 않는다.
이때는 router.prefetch를 사용해 직접 프리페칭을 실행할 수 있다.

const onClickButton = () => {
  router.push('/test');
};

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

• 컴포넌트 마운트 직후 /test 페이지 프리페칭 실행
• 실제 클릭 시 이미 리소스가 준비된 상태

Prefetching 비활성화

모든 링크가 프리페칭될 필요는 없다.
이동 가능성이 낮거나 무거운 페이지라면 명시적으로 해제할 수 있다.

<Link href='/search' prefetch={false}>
  search
</Link>

Prefetching으로 미리 가져오는 것들

Next.js는 다음 리소스를 미리 준비한다.

• 해당 페이지의 JavaScript 번들
• (Page Router 기준) 페이지 렌더링에 필요한 코드
• App Router에서는 RSC Payload까지 포함

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

일반 페이지 이동 vs Prefetching

구분	일반 이동	Prefetching
요청 시점	클릭 후	클릭 전
체감 속도	느림	거의 즉시
UX	로딩 체감	앱처럼 자연스러움

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

정리

Next.js의 Prefetching은 초기 로딩 시 현재 페이지에 필요한 코드만 우선 로드하고,
이동 가능성이 있는 페이지의 리소스를 백그라운드에서 미리 준비함으로써
빠른 페이지 전환, 짧은 Hydration, 개선된 TTI를 제공하는 성능 최적화 전략이다.