[Next] 06. Pre-fetching

미리 페이지 불러오는건가요?

 

Next.js는 어떻게 미리 페이지를 불러올까?

Next.js를 쓰면 페이지 이동이 굉장히 빠르다는 느낌을 받게 됩니다.
이건 단지 라우팅 방식 때문만이 아니라, Next.js가 "미리" 다음 페이지를 로딩하고 있기 때문입니다.
바로 이걸 Pre-fetching(프리페칭)이라고 합니다.

✅ Pre-fetching이란?

사용자가 아직 클릭하지도 않았는데, 앞으로 방문할 가능성이 높은 페이지를 미리 요청해서
느낌상 거의 즉시 로드되는 것처럼 만드는 기술

 

아니 근데, 넥스트의 렌더링 과정은

“Next.js는 서버에서 HTML을 내려주고, 그 다음 모든 JS 파일을 한 번에 번들링해서 브라우저에 보내는 구조 아닌가요?
JS 번들을 다 받았으면, 다른 페이지로 이동할 때는 추가 요청 없이 렌더링만 하면 되는 거 아닌가요?”
이미, js번들 다 받았는데 왜 다른 페이지로 가기 위해 추가적인 데이터를 요청하지?

 

하지만 이건 틀린 전제입니다.
Next.js는 모든 JS 파일을 한 번에 보내지 않습니다.

✅ Next.js는 페이지별로 JS 번들을 “쪼개서” 보냅니다 (Code Splitting)

Next.js는 초기 로딩 속도 최적화를 위해 각 페이지마다 필요한 JS 코드만 분리해서 전달합니다. 이를 Code Splitting(코드 스플리팅)이라고 합니다.

💡 그렇기 때문에 prefetch가 필요함

Next.js의 <Link href="/about">는 화면에 등장한 순간,
“이거 곧 클릭할지도 모르니 JS 파일을 미리 받아두자”라는 의도로
/about 페이지의 JS 파일을 백그라운드에서 요청(prefetch)합니다.

그래서 사용자가 실제로 클릭하면 이미 JS가 준비된 상태라 즉시 전환이 되는 거죠.

 

오호, 잘만들었네요. 어떻게 이런 생각을 했지

📌 정리

• ❌ Next.js는 모든 페이지의 JS를 한 번에 받지 않습니다.
• ✅ 초기 페이지에 필요한 JS만 로딩하고, 나머지 페이지는 이동할 때 JS 파일을 비동기 로딩합니다.
• ✅ 그래서 prefetch는 “앞으로 이동할 가능성이 있는 페이지의 JS 파일”을 미리 받아두는 전략입니다.

“현재 페이지에서 바로 연결된 링크들에 대해서만 JS 파일을 prefetch(선제적으로 로딩)하는 것”이군요.

개발자 도구로 네트워크 디버깅 할 때 조금 귀찮아지겠다? 오 개발모드에서는 프리패칭 안된대요.

✅ <Link>는 prefetch 됨

• <Link href="/about" />가 뷰포트에 보이면 → 자동 prefetch

❌ router.push()는 prefetch 안 됨

• router.push('/about')는 단순히 이동만 함
• 미리 JS 파일을 요청하진 않음

근데 나 prefetch 하고 싶은데요?

 

수동으로 세팅하면 됨.

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

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

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