NEXT.JS 의 프리페칭(pre-fetching)의 동작

 

 Pre-Fetching이란? 

   -  페이지를 사전에 불러오는 것을 의미한다. 

   -  예를 들어 현재 페이지에서 링크로 연결되어 있는 페이지를 현재 페이지가 실행될 때 사전 미리 다 불러와 놓는 기

   -  페이지 이동을 빠르게 지체없이 하기 위해 NEXT.JS에서 지원한다. 

 

 

이는 개발자모드의 네트워크 탭에서 눈으로 확인이 가능하다.

 

이해를 쉽게 하기 위해 아래에는 각 페이지로 이동하는 Link와 버튼을 클릭했을 때 이벤트 핸들러를 통해 이동하는 경우 

두 가지를 작성하여 확인해 보겠다. 

import "@/styles/globals.css";
import type { AppProps } from "next/app";
import Link from "next/link";
import { useRouter } from "next/router";
import { useEffect } from "react";

export default function App({ Component, pageProps }: AppProps) {
  const router = useRouter();
  const onClickButton = () => {
    router.push("/test");
    //replace는 뒤로가기 못하게함
    //back 은 뒤로가게함
  };

  return (
    <>
      <header>
        <Link href={"/"}>index</Link>
        &nbsp;
        <Link href={"/search"}>search</Link>
        &nbsp;
        <Link href={"/book/1"}>book/1</Link>
        <div>
          <button onClick={onClickButton}>/test 페이지로 이동</button>
        </div>
      </header>
      <Component {...pageProps} />
    </>
  );
}

 

  

 

이 상태에서 build 후  서버를 실행하여

 

http://localhost:3000/ 에서 네트워크 탭을 확인해 보면 

 

 

 

 

링크로 걸어둔 index,search,book페이지는 아직 이동하지 않았는데, 

해당 페이지에서 필요한 자바스크립트 코드들을 미리 프리페칭이 된 것이 볼 수 있다.

 

하지만 이벤트 핸들러로 연결한 /test 페이지의 경우에는 불러오지 않은 것을 확인할 수 있음 

 

이는 , 프로그레틱하게 페이지를 이동하도록 설정을 해뒀기 때문임

 

즉 , 링크 컴포넌트로 명시된 경로가 아니라면 프리패칭이 이루어지지 않음 

 

하지만 이 test페이지의 경우에도 프리페칭을 하고싶다면?

 

그러면 마운트 되었을 때 , 직접 프로그래메틱하게 테스트 페이지를 프리페칭하게 만들어주면 됨

 

router객체의 prefecth라는 메서드를 호출하여, 인수로는 어떤 페이지를 프리페칭할건지 넣어주면 

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

 

이렇게 다시 build를 후 서버를 실행해봤다. 

 

보면 아까와 다르게 test 페이지가 프리페칭이 이루어지는 것을 것을 확인할 수 있다. 

 

 

 

그러면 링크 컴포넌트에서 자동으로 진행되는 프리페칭을 강제로 해제하는 방법은

 

prefecth={false} 를 props로 전달하면된다. 

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

 

search 페이지가 프리페칭이 이루어지지 않는 것을 확인할 수 있다.