App Router (4) - 네비게이션, 프리페칭

2026.09.25 · 4분 읽기 · 조회 0

Navigation

App Router에서도 페이지 이동은 Client Side Rendering 방식으로 처리된다.

페이지 라우터에서는 브라우저에서 페이지 이동 요청이 오면 이에 필요한 컴포넌트를 서버에서 내려주어 브라우저 측에서 페이지 교체를 진행한다.

프리페칭을 통해 이동할 페이지의 데이터를 미리 불러오기도 한다.

App Router에는 Server Component 또한 추가되었기 때문에 약간 다르다.
간단하다. JS Bundle 에는 클라이언트 컴포넌트만 있기 때문에 RSC Payload도 같이 보내주는거다. 크게 다른 점은 없다.

구현

// layout.tsx
export default function Layout(){
 
  return (
    <>
      <Link src={'/'}>home</Link>
      <Link src={'/search'}>search</Link>
    </>
  )
}

Link태그를 이용해서 네비게이팅을 구성한다. 이때 네트워크 탭을 열어보면 실제로 어떤 값들을 받는 지 알 수 있다. search 페이지에 서버 컴포넌트가 있다면 RSC Payload도 내려받을 것이다.
RSC Payload를 내려받는 것을 볼 수 있다.
클라이언트 컴포넌트가 있다면 JS Bundle을 내려받는 것도 볼 수 있다.

Programmatic Navigation

특정 함수 실행 시, 이벤트 발생 시 페이지를 이동시키는 방법도 역시 마찬가지로 있다.
페이지라우터와 거의 유사하다.

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

버튼과 함수를 연결시켜주고,

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

useRouter 훅을 import 해서 불러오면 되는데, next/router 에서 불러오는게 아닌 next/navigation 에서 불러와야 함에 주의한다. 잘못 불러오면 런타임 에러가 발생한다.

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 페이지가 미리 불러와졌다.

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

이 까지는 Page Router와 동일하나 한 가지 차이점이 존재한다. App Router 에서는 Static한 페이지는 프리페칭으로 RSC Payload, JS Bundle을 전부 받아오지만,
Dynamic(동적 경로, 쿼리스트링 등)한 페이지의 경우에는 값이 달라질 수 있기 때문에 RSC Payload 만 불러온다. 이는 이후에 자세히 알아본다.

Pre-fetching 설정

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

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

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

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

Pre-fetching 해제

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

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

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

댓글

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

관련 글