Page Router (3) - 네비게이팅, 프리페칭(Pre-fetching)

2026.09.14 · 3분 읽기 · 조회 0

네비게이팅

헤더를 통해 네비게이팅을 구현해보자.

Link 태그

//_app.tsx
import "@/styles/globals.css";
import type { AppProps } from "next/app";
 
export default function App({ Component, pageProps }: AppProps) {
  return;
  <>
    <header></header>
    <Component {...pageProps} />
  </>;
}

header는 전역적으로 있어야 하기 때문에 _app.tsx에 만들어준다. next에서는 <a>태그를 통해 이동시키는 것이 아니라 Link 컴포넌트를 통해서 네비게이팅을 해준다.

(생략)
  return (
    <>
      <header>
        <Link href={"/search"}>Search</Link>
          <br></br>
        <Link href={"/book"}>Book</Link>
      </header>
    </>
  );
}

이런 식으로 a태그와 유사하게 href 내부에 경로를 적어주면 된다.
클라이언트 사이드 렌더링이기 때문에 매우 빠르다.

Programmatic Navigation

특정 함수 실행 시, 이벤트 발생 시 페이지를 이동시키는 방법도 있다.

버튼을 눌렀을 때 페이지를 이동시키는 방법을 알아보자.

  const onClickButton = () => {};
 
  return (
    <>
      <header>
        (생략)
        <div>
          <button onClick={onClickButton}>test페이지로 이동</button>
        </div>
     </header>
  )

다음과 같이 버튼과 함수를 연결시켜준다. 함수 내부에 페이지 이동 로직을 넣어준다.

import { useRouter } from "next/router";
  (생략)
  const router = useRouter();
  
  const onClickButton = () => {
    router.push("/test");
  };

router 객체를 할당 후, 객체 내부의 push 메서드를 이용하면 된다.

router 에는 push 메서드 말고도

• replace : 뒤로 가기를 방지하며 이동시켜주는 메서드
• back : 이전 페이지로 이동하는 메서드

등이 있다.

Pre-Fetching

해당 용어는 페이지를 사전에 미리 불러온다는 뜻이다.
현재 사용자가 보고있는 페이지에서, "이동할 가능성이 있는" 모든 페이지들을 사전에 미리 불러와 놓는 기능을 의미한다.
이렇게 미리 불러와놓으면 페이지 이동을 빠르게 할 수 있다.

next는 서버 -> 클라이언트로 JS Bundle을 보내줄 때 "현재 페이지 접속에 필요한 JS Bundle"만 전달해준다. /search에 접속을 요청하면 Search JS Bundle 만 보내준다.

항상 초기접속 요청 마다 모든 페이지의 JS Bundle을 보내주게 되면 하이드레이션이 너무 늦어지기 때문이다.

이로 인해 다른 페이지로 이동요청을 할 때 마다 서버에서 해당 페이지의 JS Bundle을 받아오는 비효율적인 페이지 이동이 발생할 수 있다. 이때문에 Pre-Fetching이 필요하다.

현재 페이지와 연결된 모든 페이지의 JS Bundle들을 미리 불러와 놓기 때문에, 페이지 이동 시에는 서버 없이 클라이언트 사이드 렌더링이 가능해져 빠른 페이지 이동이 가능하다.

크롬 콘솔의 Network 탭에서 프리페칭을 확인해 볼 수 있다.
Dev모드에서는 동작하지 않으므로 npm run build, npm run start를 통해 빌드된 파일로 확인할 수 있다.

/ 베이스 페이지로 들어오면 네트워크 탭에 여러 js 요청이 날아간다.
네트워크 패킷을 열어보면 해당 페이지와 연결된 search와 , book 페이지가 미리 불러와졌다.

때문에 해당 페이지로 접속하여도 추가적인 네트워크 왕복이 일어나지 않는걸 확인할 수 있다. 왕복이 일어나는 경우는 캐시가 만료된 경우이다.

Pre-fetching 설정

Link 태그로 연결해놓은 페이지들은 기본적으로 프리페칭이 된다.

그러나 Programmatic Navigation으로 구현해놓은 /test와 같은 페이지의 경우에는 Pre-Fetching이 일어나지 않는다.
이에도 똑같이 프리페칭시켜주고 싶다면, App 컴포넌트가 마운팅 되었을 때, 프리페칭이 일어나도록 코드를 추가해줘야 한다.

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

prefetch 메서드 내부에 프리페칭할 경로를 적어주면, App 컴포넌트가 마운트될 때 프리페칭이 일어난다.

Pre-fetching 해제

프리페칭을 원하지 않는 경우에는 해제할 수 있다.

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

Link 컴포넌트의 프롭스에 prefetch를 false 로 바꿔주면 된다.

댓글

giscus로 동작하며 GitHub Discussions에 저장됩니다.

관련 글