Next.js - app router Navigating

app router에서의 페이지 네비게이팅 변경점

기존 page router 방식에서 pre-fetching이 일어나는 것은 페이지가 이동 가능성이 있는 페이지의 데이터를 미리 가져오는 것인데, 여기서 JS번들파일을 가져오고,

app router 의 경우에는 RSC payload가 추가적으로 받아지게 된다. JS번들에는 클라이언트 컴포넌트만 추가되었기 때문에. 서버컴포넌트를 가져오기 위해 RSC payload가 추가되는 것이다.

next.js의 pre-fetching 이 app router 방식에서 동작하는 방식

pre-fetching 동작을 확인하려면 production 모드에서 확인가능

프로젝트를 빌드하게 되면 결과물로서 next.js는 static, dynamic두 가지 형태로 만들어지게 된다. static은 기존의 SSG, dynamic은 SSR방식으로 만들어졌다고 이해하면된다.

여기서 static은 RSC, JS번들파일 을 pre-fetching 하도록 데이터 요청이 추가로 들어오고,

다이나믹은 RSC만 가져오게 된다. 즉, 실제 페이지가 이동을 했을 때만 JS코드를 가져오게 되는 것이다.

추가적으로 쿼리파라미터를 필요로 할 경우,

import { useSearchParams } from "next/navigation";

export default function Searchbar() {

const searchParams = useSearchParams();

const q = searchParams.get("q");

}

이 방식으로 page router 와는 다른 방법으로 불러올 수 있다.