Next.js 06 - 프리패칭

프리패칭(Prefetching)이란?

사용자가 페이지를 방문하기 전에, 미리 다음 페이지의 데이터를 불러와 빠르게 이동시켜주는 기능

 

・ 사용자는 클릭만 해도 페이지가 바로 뜨는 것처럼 느껴지며

・ UX + 실제 체감 성능이 향상된다.

---

프리패칭의 작동 방식

조건	설명
<Link> 사용	next/link를 통한 라우팅만 자동 프리패치
뷰포트 진입	해당 링크가 화면에 보여질 때만 prefetch
prefetch 활성화	기본값은 true로, <Link prefetch={false}> 로 설정 가능

---

페이지 타입별 프리패치

1. 정적(static) 페이지

/, /about, /contact 같이 빌드 타임에 페이지가 고정되어 있는 경우

 

내용이 고정되어 있기 때문에 Next.js는 해당 페이지의 JS(page.js)와 JSON 데이터(.json)을 만들어 둔다.

이후 브라우저는 이 JS와 .json를 미리 다운로드(prefetch) 한다.

 

2. 동적(dynamic) 페이지

/book/[id], /profile/[id] 같이 경로 안에 동적 파라미터가 들어가 있는 경우

 

어떤 id를 클릭할지 모르기에 JS 파일이 아닌 RSC Payload만 미리 요청한다.

---

프리패칭 주의사항

1. prefetch는 JS가 아닌 다른 데이터도 포함

・ App Router에서는 서버 컴포넌트가 HTML만 렌더링하므로 RSC Payload 위주로 프리패치함

 

2. 링크가 화면에 보여야 prefetch

・ 숨겨진 상태나 스크롤 바깥에 있으면 프리패치 안 됨

 

3. 동적 세그먼트는 조건부 prefetch 필요

・ 예를 들어 example/[id] 처럼 id 를 미리 알 수 없는 경우 prefetch 제한

・ 이럴 경우 prefetch 수동 트리거 혹은 fallback 전략 고려

 

4. prefetching 이 많으면 오히려 느려질 수 있음

・ 한 페이지에 많은 링크가 있을 경우, 리소스를 미리 너무 많이 가져오게 되어 초기 로딩 부하 유발 가능