모든 애플리케이션의 골격은 라우팅입니다.
용어
먼저, 사용되는 용어에 대해 정리해봅니다.
-
트리 : 계층 구조를 시각화하기 위한 규칙입니다. 예를 들어 부모 및 자식 컴포넌트로 구성된 컴포넌트 트리, 폴더 구조 등이 있습니다.
-
서브트리 : 트리의 일부로, 새 루트에서 시작하여 리프에서 끝나는 트리의 일부입니다.
-
루트 : 루트 레이아웃과 같은 트리 또는 하위 트리의 첫 번쨰 노드입니다.
-
리프 : 하위 트리의 노드 중 자식이 없는 노드입니다.
-
URL 세그먼트 ( URL Segment ) : 슬래시로 구분된 URL 경로의 일부입니다.
-
URL 경로 ( URL Path ) : 도메인 뒤에 오는 URL의 일부입니다.
app Router
버전 13에서는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React 서버 컴포넌트에 기반한 새로운 앱 라우터가 도입되었습니다.
앱 라우터는 app이라는 새 디렉터리에서 작동합니다. app 디렉터리는 page 디렉터리와 함께 작동하며 점진적인 적용이 가능합니다. 따라서 애플리케이션의 일부 경로를 새 동작으로 선택하면서 다른 경로는 이전 동작을 위해 page 디렉터리에 유지할 수 있습니다.
앱 라우터는 페이지 라우터보다 우선합니다. 디렉터리 간 경로가 중복되는 것을 방지하기 위해 빌드 타임에 오류가 발생합니다.
기본적으로 앱 내부의 컴포넌트는 React 서버 컴포넌트입니다. 이는 성능 최적화를 위한 것으로 쉽게 채택할 수 있으며, 클라이언트로 사용할 수도 있습니다.
폴더와 파일의 역할
Next.js는 파일 시스템 기반 라우터를 사용합니다.
폴더는 경로를 정의하는 데 사용합니다. 경로는 중첩된 폴더의 단일 경로로, 파일 시스템 계층 구조를 따라 루트 폴더에서 page.js 파일이 포함된 최종 리프 폴더로 내려갑니다.
파일은 해당 Route Segments에 표시되는 UI를 만드는 데 사용합니다.
Route Segments
Route의 각 폴더는 Route Segments를 나타냅니다. 각 Route Segments는 URL 경로의 해당 세그먼트에 매핑됩니다.
중첩 라우팅 ( Nested Routes )
중첩 라우팅을 생성하기 위해서는 폴더를 서로 중첩하면 됩니다. 예를 들어서 앱 디럭터리에 두 개의 새 폴더를 중첩하여 /dashboard/settings/ 경로를 추가할 수 있습니다.
/dashboard/settings/ 경로는 세 개의 세그먼트로 구성됩니다.
-
/( Root segment ) -
dashboard( segment ) -
settings( Leaf segment )
파일 컨벤션
Next.js는 중첩 라우팅에서 특정 동작을 하는 UI를 생성하기 위한 특수 파일 세트를 제공합니다.
-
layout: 세그먼트와 자식 요소들이 공유하는 UI -
page: 해당 경로의 고유한 UI 생성 및 공개적으로 접근 가능한 경로 만들기 -
loading: 세그먼트와 자식 요소의 로딩 UI -
error: 세그먼트와 자식 요소의 에러 UI -
gloabal-error: 전역 에러 UI -
route: 서버 사이드 API 엔드 포인트 -
template: 특수한 리랜더링 레이아웃 UI -
default: Parallel Routes을 위한 폴백 UI
컴포넌트 계층 구조
Route Segment의 특수 파일에 정의된 React 컴포넌트는 특정 계층 구조로 랜더링됩니다.
중첩 라우팅에서는 세그먼트의 구성 요소는 상위 세그먼트의 구성 요소안에 중첩됩니다.
Colocation
특수 파일 외에도 앱 디렉터리의 폴더에 컴포넌트, 스타일, 테스트 등 자체 파일을 배치할 수 있는 옵션이 있습니다.
폴더는 경로를 정의하는 반면, page.js 또는 route.js 가 반환하는 콘텐츠만 공개적으로 주소를 지정할 수 있기 때문입니다.
클라이언트 Navigation이 포함된 서버 중심 라우팅
클라이언트 측 라우팅을 사용하는 페이지 디렉토리와 달리, 앱 라우터는 서버 중심 라우팅을 사용하여 서버 컴포넌트 및 서버의 데이터 가져오기에 맞춰 조정합니다. 서버 중심 라우팅을 사용하면 클라이언트가 경로 맵을 다운로드할 필요가 없으며, 서버 컴포넌트에 대한 동일한 요청을 사용하여 경로를 조회할 수 있습니다. 이 최적화는 모든 애플리케이션에 유용하지만 경로가 많은 애플리케이션 일수록 더 큰 영향을 미칩니다.
라우팅은 서버 중심이지만 라우터는 SPA의 동작과 유사한 링크 컴포넌트와 함께 클라이언트 탐색을 사용합니다. 즉, 사용자가 새 경로로 이동할 때 브라우저는 페이지를 새로고침하지 않습니다. 대신 URL이 업데이트되고 Next.js는 변경되는 세그먼트만 랜더링됩니다.
또한 사용자가 앱을 탐색할 때 라우터는 React 서버 컴포넌트 페이로드의 결과를 클라이언트 측 캐시에 저장합니다. 캐시는 경로 세그먼트별로 분할되어 어느 수준에서든 무효화를 허용하고 React의 동시 랜더링 전반에 걸쳐 일관성을 보장합니다. 즉, 특정 경우 이전에 가져온 세그먼트의 캐시를 재사용하여 성능을 더욱 향상시킬 수 있습니다.
부분 랜더링
형제 경로 사이를 이동할 때 Next.js는 변경되는 경로의 레이아웃 및 페이지만 가져와 랜더링합니다. 하위 트리의 세그먼트 위에는 아무것도 다시 가져오거나 다시 랜더링하지 않습니다. 즉, 레이아웃을 공유하는 경로에서 사용자가 형제 페이지 사이를 이동해도 레이아웃은 유지됩니다.
부분 랜더링이 없다면 페이지 이동 시마다 전체 페이지가 서버에서 다시 랜더링됩니다. 따라서 필요한 세그먼트만 랜더링하면 전송되는 데이터의 양과 실행 시간이 줄어들어 성능이 향상됩니다.
고급 라우팅 패턴
앱 라우터는 고급 라우팅 패턴을 구현하는 데 도움이 되는 일련의 규칙을 제공합니다.
-
Parallel Routes : 독립적으로 탐색할 수 있는 두 개 이상의 페이지를 동일한 보기에 동시에 표기할 수 있습니다. 자체 하위 탐색이 있는 분할 보기에 사용할 수 있습니다.
-
경로 가로채기 : 경로를 가로채서 다른 경로의 컨택스트를 표시할 수 있습니다. 현재 페이지의 컨텍스트틀 유지하는 것이 중요한 경우에 사용할 수 있습니다. 예를 들어, 하나의 작업을 편집하는 동안 모든 작업을 보거나 피드에서 사진을 확인하는 경우입니다.
이러한 패턴을 사용하면 더 풍부하고 복잡한 UI를 구축할 수 있으므로 소규모 팀이나 개별 개밸자가 구현하기에는 복잡했던 기능을 대중화할 수 있습니다.
