앱 라우터는 라우팅 및 네비게이션에 하이브리드 접근 방식을 사용한다. 서버 측에서는 애플리케이션 코드가 자동으로 세그먼트별로 코드 분할된다. 클라이언트 측에서는 Next.js가 경로 세그먼트를 사전로드하고 캐시한다. 이는 사용자가 새로운 경로로 이동할 때 브라우저가 페이지를 다시로드하지 않으며 변경된 경로 세그먼트만 다시 렌더링되어 네비게이션 경험과 성능이 향상된다.
코드 분할(Code Splitting)은 애플리케이션 코드를 더 작은 번들로 분할하여 브라우저에서 다운로드 하고 실행할 수 있도록 한다. 이렇게 하면 전송되는 데이터 양과 각 요청의 실행 시간이 줄어들어 성능이 향상된다.
서버 컴포넌트를 사용하면 애플리케이션 코드가 자동으로 route 세그먼트별로 코드 분할된다.
이는 네이게이션 시 현재 경로에 필요한 코드만 로드된다는 것을 의미한다.
prefetching은 사용자가 경로를 방문하기 전에 배경을 미리 로드하는 방법이다.
Next.js에서 두 가지 방법으로 경로가 prefetched 된다.
<Link> : 사용자 뷰포트에 표시되는 대로 경로가 자동으로 사전로드된다. 페이지가 처음로드되거나 스크롤을 통해 보이게 되는 경우 사전로드가 발생한다.router.prefetch() : useRouter 훅을 사용하여 프로그래밍 방식으로 경로를 사전로드 할 수 있다.<Link> 의 기본 사전로드 동작(즉, prefetch prop이 지정되지 않거나 null로 설정된 경우)은 loading.js의 사용에 따라 다르다. 첫 번째 loading.js 파일까지 컴포넌트 “tree” 를 따라 공유 레이아웃만 30초 동안 사전로드 및 캐싱된다. 이렇게 함으로써 전체 동적 경로를 가져오는 비용을 줄이고 사용자에게 더 나은 시각적 피드백을 제공할 수 있다.
prefetch prop을 false로 설정하여 사전로드를 비활성화할 수 있다. 또는
prefetch prop을 true로 설정하여 로딩 경계를 넘어 전체 페이지 데이터를 사전로드 할 수도 있다.