App Router

App Router

Pages Router, App Router

 

예약된 파일명

layout 세그먼트 및 해당 하위에 대한 공유 UI
page 경로의 고유한 UI 및 공개적으로 접근 가능한 경로 만들기
loading 세그먼트 및 해당 하위에 대한 UI 로드
not-found 세그먼트 및 해당 하위에 대한 UI를 찾을 수 없음
error 세그먼트 및 해당 하위에 대한 오류 UI
global-error 전역 오류 UI
route 서버 측 API 끝점
template 전문적으로 다시 렌더링된 레이아웃 UI
default 병렬 경로 에 대한 폴백 UI

 

구성 요소 계층

React 구성 요소는 예약된 파일 요소를 계층 구조로 렌더링한다.

layout.js
template.js
error.js(반응 오류 경계)
loading.js(리액트 서스펜스 경계)
not-found.js(반응 오류 경계)
page.js또는 중첩layout.js

 

내포된 경로에서 세그먼트의 구성요소는 상위 세그먼트의 구성요소 내에 내포된다.

 

코로케이션

app 디렉터리의 폴더 안에 고유한 파일(예: 구성 요소, 스타일, 테스트 등)을 함께 배치할 수 있는 옵션이 있다
page.js폴더가 경로를 정의하는 동안 또는 에서 반환된 내용만 route.js공개적으로 주소 지정이 가능하기 때문이다.

 

 

서버 중심 라우팅

 

pages클라이언트 측 라우팅을 사용하는 디렉토리 와 달리 앱 라우터는 서버 중심 라우팅을 사용하여 서버 구성 요소 및 서버의 데이터 가져오기 에 맞춥니다 . 서버 중심 라우팅을 사용하면 클라이언트는 경로 맵을 다운로드할 필요가 없으며 서버 구성 요소에 대한 동일한 요청을 사용하여 경로를 조회할 수 있습니다. 이 최적화는 모든 애플리케이션에 유용하지만 경로가 많은 애플리케이션에 더 큰 영향을 미칩니다.

라우팅은 서버 중심이지만 라우터는 단일 페이지 응용 프로그램의 동작과 유사한 링크 구성 요소 와 함께 클라이언트 측 탐색을 사용합니다. 즉, 사용자가 새 경로로 이동할 때 브라우저가 페이지를 다시 로드하지 않습니다. 대신 URL이 업데이트되고 Next.js는 변경된 세그먼트만 렌더링합니다 .

또한 사용자가 앱을 탐색할 때 라우터는 React Server 구성 요소 페이로드의 결과를 메모리 내 클라이언트 측 캐시 에 저장합니다 . 캐시는 모든 수준에서 무효화를 허용하고 React의 동시 렌더링 에서 일관성을 보장하는 경로 세그먼트로 분할됩니다.. 이는 특정한 경우에 이전에 가져온 세그먼트의 캐시를 재사용하여 성능을 더욱 향상시킬 수 있음을 의미합니다.

 

부분 렌더링

형제 경로(예 /dashboard/settings: /dashboard/analytics이하) 사이를 탐색할 때 Next.js는 변경되는 경로의 레이아웃과 페이지만 가져오고 렌더링합니다. 하위 트리의 세그먼트 위에 있는 항목을 다시 가져오거나 다시 렌더링 하지 않습니다 . 이는 레이아웃을 공유하는 경로에서 사용자가 형제 페이지 사이를 탐색할 때 레이아웃이 유지됨을 의미합니다.