Next.js Docs (2) Routing Fundamentals

공식문서 읽어보기 2번째 Router Fundamentals.

Next.js 13에서 추가된 App Router를 기준으로 공식문서를 읽고 정리해본다.

 

Routing Fundamentals

애플리케이션의 뼈대인 라우터를 Next.js에서는 어떤 컨셉으로, 어떤 방식으로 handling하는지 이 문서에서 소개한다.

 

Terminology

앞으로 이 문서에서 다음의 단어들을 많이 볼 것이다. 

출처 : Next.js 공식문서

- Tree : 계층구조를 시각화하기 위한 규칙. 예를 들면 부모와 자식이 있는 컴포넌트 트리나 폴더 구조 등

- Subtree : Tree의 일부분으로 새 root부터 시작해서 leaf에서 끝난다.

- Root : tree나 subtree의 첫번째 노드, 예를 들면 루트 레이아웃

- Leaf : 자식이없는 subtree의 노드, 예를 들면 URL 경로의 마지막 segment

출처 : Next.js 공식문서

- URL Segment :  슬래쉬(/)로 구분된 URL path의 일부

- URL Path : 도메인 뒤에 오는 URL의 일부(segment로 구성됨)

 

The app Directory

Next.js 13버전에서 추가된 App Router는 React 서버 컴포넌트로 만들어졌고, 레이아웃 공유, 중첩 라우팅, 로딩 상태, 에러 핸들링 등을 지원한다.

 

App Router는 app 디렉토리에서 동작한다. 기존의 pages 디렉토리도 여전히 작동하기 때문에 점진적으로 선택하여 사용하면 된다. 이렇게 되면 이전에 만들어둔 router는 pages 디렉토리에 두고 새로운 router는 app 디렉토리에 만들면서 코드작업을 진행할 수 있다. 만약 pages 디렉토리를 사용하고 싶으면 Page Router 문서를 참고할 것.

* App router가 Page Router보다 우선순위가 높다. 라우터간 URL은 같지 않아야 하고 만약 같다면 충돌을 방지하기 위해 빌드 에러가 발생한다.

 

기본적으로 app 디렉토리 내부의 컴포넌트는 React 서버 컴포넌트이다. 성능 최적화를 위한 작업이지만 필요하다면 클라이언트 컴포넌트를 사용할 수 있다.

 

폴더와 파일의 역할

Next.js는 다음과 같은 파일 기반의 라우터 시스템을 사용한다.

- 폴더는 route를 정의할 때 사용한다. route는 root 폴더에서 page.js 파일이 포함된 leaf 폴더까지 파일 시스템 계층을 따라 중첩된 폴더의 단일 경로이다. 경로 정의시 참조할 것

- 파일은 route 세그먼트에 대해 표시되는 UI를 만드는데 사용된다.

 * 하단의 File Conventions 참조

 

Route Segments

route 안의 폴더들은 하나의 route segment를 나타낸다. 각각의 route segment들은 URL 경로의 해당 segment에 매핑된다.

출처 : Next.js 공식문서

 

중첩된 Routes

중첩된 route를 만들려면 폴더를 서로 중첩시키면 된다. 예를 들어 새로운 /dashboard/settings route를 app 디렉토리 안에 두 개의 새폴더를 추가하여 중첩할 수 있다.  /dashboard/settings route는 세 개의 segment로 구성된다.

- /  (Root segment)

- dashboard (Segment)

- settings (Leaf Segment)

 

File Conventions

Next.js는 중첩된 route에서 특수한 동작으로 UI를 생성하기 위해 특별한 파일을 지원한다.

layout	segment와 자식 컴포넌트에 공유하는 UI
page	route의 고유한 UI로 route를 공개적으로 접근할 수 있다.
loading	segment와 자식 컴포넌트의 로딩 UI
not-found	segment와 자식 컴포넌트의 Not Found UI
error	segment와 자식 컴포넌트의 error UI
global-error	Global error UI
route	서버사이드 API 엔드포인트
template	리렌더링에 특화된 layout UI
default	병렬 route용 fallback UI

* .js, .jsx, .tsx 확장자 사용가능

 

Component Hierarchy

Route segment의 특수 파일에(위 표의 파일) 정의된 React 컴포넌트는 특별한 계층 구조로 렌더링된다.

- layout.js

- template.js

- error.js (React error boundary)

- loading.js (React suspense boundary)

- not-found.js (Reacr error boundary)

- page.js 나 중첩된 layout.js

출처 : Next.js 공식문서

 

중첩된 route에서 segment의 컴포넌트는 부모 segment의 컴포넌트 내부에 중첩된다.

출처 : Next.js 공식문서

 

Colocation

특수 파일 외에도 app directory 내에 자신의 파일(컴포넌트, 스타일, 테스트 등)을 colocation(병합?) 할 수 있는 옵션이 있다. 

 이렇게 하는 이유는 폴더가 routes를 정의할 때 page.js나 route.js에서 반환하는 컨텐츠들만 공개적으로 접근이 가능하기 때문이다.

출처 : Next.js 공식문서

자세한 사항은 Project Organization and Colocation 참고.

 

Server-Centric Routing with Client-side Navigation

(client-side 네비게이션을 사용한 서버 중심의 라우팅?)

client-side 라우팅을 사용하는 pages 디렉토리와는 다르게 App Router는 서버 중심의 라우팅을 사용하여 서버 컴포넌트 및 서버의 데이터 fetching과 일치시킨다. 서버 중심의 라우팅을 사용하면 클라이언트는 route map을 다운로드 할 필요가 없고 서버 컴포넌트에 대한 동일한 요청을 routes 검색에 사용할 수 있다. 이러한 최적화는 모든 애플리케이션에서 유용하지만 routes가 많은 애플리케이션에서 더 큰효과를 볼 수 있다.

 

Routing이 서버중심이지만, router는 client-side 네비게이션인 Link 컴포넌트를 사용한다. - SPA 애플리케이션과 동작이 유사하다. 이것은 사용자가 새로운 route로 이동할 때 browser가 페이지를 reload하지 않는다는 것을 의미한다. 대신 URL이 업데이트되고 Next.js는 변경되는 segment만 렌더링한다.

 

추가로 사용자가 app을 탐험할 때 router는 서버 컴포넌트 payload의 결과를 in-memory client-side 캐시에 저장한다. 이 캐시는 route segment별로 분할되므로 모든 수준에서 무효화 할 수 있고, React의 동시 렌더링의 일관성을 보장한다. 이것은 특정한 경우에 이전에 받은 segment의 캐시를 다시 사용하여 성능을 향상시킬 수 있음을 의미한다.

 

더 자세한 사항은  Linking and Navigating 참조.

 

Partial Rendering

(부분 렌더링)

형제 routes간 탐험할 때(예를 들면 하단 그림의 /dashboard/settings 와 /dashboard/analytics), Next.js는 route의 변경되는 레이아웃과 페이지만 가져와 렌더링한다. Subtree의 segment 위에 있는 어떤 것도 다시 가져오거나 다시 렌더링 하지 않는다. 즉, 레이아웃을 공유하는 route에서 사용자가 형제 routes간 이동에서는 레이아웃이 유지된다.

출처 : Next.js 공식문서

부분 렌더링이 없다면 경로 이동을 할 때 페이지의 모든것을 서버에서 다시 렌더링 해야할 것이다. 업데이트된 부분만 렌더링 함으로써 전송되는 데이터 양과 실행 시간을 줄이고 성능을 향상시킨다.

 

Advanced Routing Patterns

App Routers는 개발자가 좀 더 심화된 routing 패턴을 구현하는것을 돕기 위해 다음과 같은 set conventions를 제공한다.

 

- Parallel Routes : 하나의 view에서 독립적으로 navigate 할 수 있는 페이지를 두 개 이상 동시에 표시할 수 있다. 자체 sub-navigation이 있는 분할 view에서 활용할 수 있다. 예) 대시보드

 

- Intercepting Routes : Route를 가로채서 다른 경로의 context에 표시할 수 있다. 현재 페이지의 context를 유지하는 것이 중요할 때 사용할 수 있다. 예) 하나의 task를 편집하거나 피드에서 사진을 확장하는 동안 모든 작업 보기

* 좀더 자세한 사항은 각 문서 참조

 

이러한 패턴들은 기존에는 소규모 팀이나 개인이 구현하기 힘들었던 좀 더 풍부하고 복잡한 UI를 만들 수 있게 해준다.

 

 

Reference

- https://nextjs.org/docs/app/building-your-application/routing

Building Your Application: Routing | Next.js