Next.js의 프리 페칭 (Pre-fetching)

Pre-fetching이란?

Pre-fetching은 페이지를 사전에 미리 불러오는 기능이다. 현재 사용자가 보고 있는 페이지 내에서 이동할 가능성이 있는 모든 페이지들을 사전에 미리 불러놓는다.

 

Next.js는 이 기능을 통해 이동을 위한 데이터를 미리 불러와 놓음으로써 페이지 이동을 매우 빠른 속도로 지체 없이 처리할 수 있게 해준다.

 

Link 컴포넌트 사용

기본적으로 Link컴포넌트로 명시된 경로는 프리페칭이 된다.

<header>
  <Link href={"/"}>index</Link>
  <Link href={"/search"}>search</Link>
  <Link href={"/book/1"}>book/1</Link>
</header>

프리페칭 해제 방법

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

 

Programmatic Navigation

Programmatic Navigation이란?

프리페칭 설정 방법

import { useRouter } from "next/router";

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

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

  // 마운트 시 /test 페이지를 프리페칭
  useEffect(() => {
    router.prefetch("/test");
  }, []);

  return (
    <div>
      <button onClick={onClickButton}>/test 페이지로 이동</button>
    </div>
  )
}

 

페이지 라우터와 앱 라우터에서의 차이점

페이지 라우터

• 기본적인 프리페칭 동작을 수행
• JS 번들 파일을 미리 불러옴

앱 라우터

• JS 번들 파일과 함께 RSC Payload도 미리 받아 프리페칭
• 동적 페이지의 경우 RSC Payload만 받고 JS는 받지 않음