[NextJS 13] Routing - Routing Fundamentals

모든 어플리케이션의 뼈대는 라우팅입니다. 이번 페이지에서는 웹 라우팅의 기본적인 컨셉과 NextJS에서 라우팅을 어떻게 사용하는 소개합니다.

용어(Terminology)

설명서 전체에서 아래 이미지에 있는 용어가 사용됩니다.

• Tree (트리): 계층 구조를 시각화하기 위한 관례입니다. 예를 들어, 부모 및 자식 컴포넌트로 이루어진 컴포넌트 트리, 폴더 구조 등이 있습니다.
• Subtree (서브트리): 새로운 루트(첫 번째)에서 시작하여 잎(마지막)에서 끝나는 트리의 일부입니다.
• Root (루트): 트리나 서브트리에서의 첫 번째 노드로, 루트 레이아웃과 같은 역할을 합니다.
• Leaf (리프): 자식이 없는 서브트리의 노드로, URL 경로에서의 마지막 세그먼트 등이 있습니다.

• URL Segment (URL 세그먼트): 슬래시로 구분된 URL 경로의 일부입니다..
• URL Path: 도메인 뒤에 오는 URL의 일부 입니다.

---

app 디렉터리

Next.js 13 버전에서는 React Server Components를 기반으로 한 새로운 앱 라우터(App Router)가 도입되었습니다. 이 라우터는 공유 레이아웃, 중첩된 라우팅, 로딩 상태, 오류 처리 등을 지원합니다.

폴더와 파일의 역할

Next.js는 파일 시스템 기반의 라우터를 사용합니다. 여기서:

• 폴더는 라우트를 정의하는 데 사용됩니다. 라우트는 파일 시스템의 계층 구조를 따라 루트 폴더부터 page.js 파일이 포함된 최종 리프 폴더까지의 단일 경로입니다. 자세한 내용은 "라우트 정의하기"를 참조하십시오.
• 파일은 경로 세그먼트에 대해 표시되는 UI를 만드는 데 사용됩니다. "특수 파일"을 참조하십시오.

Route Segments

각 폴더는 경로를 구분합니다. 그림처럼 URL 경로의 해당 세그먼트에 매핑됩니다.

중첩된 경로를 만들려면 폴더를 서로 중첩할 수 있습니다. 예를 들어 앱 디렉터리에 두 개의 새 폴더를 중첩하여 새 /dashboard/settings 경로를 추가할 수 있습니다

File Conventions

Next.js는 중첩된 경로에서 특정 동작으로 UI를 생성하기 위한 특수 파일 집합을 제공합니다.

layout 세그먼트 및 해당 하위에 대한 공유 UI

page	경로의 고유한 UI 및 공개적으로 접근 가능한 경로 만들기
loading	세그먼트와 해당 자식들이 로딩 중일때 보여지는 UI
not-found	세그먼트와 해당 자식들을 찾지 못했을때 보여지는 UI
error	세그먼트와 해당 자식들이 오류가 났을때 보여지는 UI
global-error	Global Error UI
route	Server-side API endpoint
template	재 렌더링될때 보이는 UI
default	병렬 라우트에 대한 대체 UI

컴포넌트 계층

경로 세그먼트의 특수 파일에 정의된 React 구성 요소는 특정 계층 구조로 렌더링됩니다.

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

 

Colocation

폴더가 경로를 정의하는 동안 page.js 또는 route.js에서 반환된 콘텐츠만 공개적으로 주소 지정이 가능하기 때문에 특수 파일 외에도 앱 디렉토리의 폴더 안에 고유한 파일(예: components, styles, tests etc 등)을 함께 배치할 수 있는 옵션이 있습니다.

서버 중심 라우팅과 클라이언트 측 네비게이션을 함께 사용하는 방식

pages 디렉토리가 클라이언트 측 라우팅을 사용하는 것과는 달리, App Router는 서버 중심 라우팅을 사용하여 서버 컴포넌트와 서버에서의 데이터 가져오기와 일치시킵니다. 서버 중심 라우팅을 통해 클라이언트는 라우트 맵을 다운로드할 필요가 없으며, 서버 컴포넌트에 대한 동일한 요청을 사용하여 라우트를 찾을 수 있습니다. 이 최적화는 모든 애플리케이션에 유용하지만, 많은 라우트가 있는 애플리케이션에 더 큰 영향을 미칩니다.

라우팅은 서버 중심이지만, 라우터는 Link 컴포넌트를 사용하여 클라이언트 측 탐색을 수행합니다. 이는 싱글 페이지 애플리케이션(SPA)의 동작과 유사합니다. 즉, 사용자가 새로운 경로로 이동할 때 브라우저는 페이지를 다시로드하지 않습니다. 대신 URL이 업데이트되고, Next.js는 변경된 세그먼트만 렌더링합니다.

또한, 사용자가 앱 내에서 탐색하는 동안 라우터는 React 서버 컴포넌트 페이로드의 결과를 인메모리 클라이언트 캐시에 저장합니다. 캐시는 라우트 세그먼트별로 분할되어 어느 수준에서든 무효화가 가능하며, React의 동시 렌더링 간 일관성을 보장합니다. 이는 특정 경우에 이전에 가져온 세그먼트의 캐시를 재사용할 수 있어 성능을 더욱 향상시킵니다.

부분렌더링

동일한 레벨의 경로 간 탐색(예: 아래의 /dashboard/settings와 /dashboard/analytics) 시에는 Next.js가 변경되는 라우트의 레이아웃과 페이지만 가져와 렌더링합니다. 서브트리의 세그먼트 위에 있는 어떤 항목도 다시 가져오거나 다시 렌더링하지 않습니다. 이는 레이아웃을 공유하는 라우트에서 사용자가 형제 페이지 간에 이동할 때 레이아웃이 보존된다는 것을 의미합니다.

부분 렌더링을 사용하지 않으면 각 탐색마다 전체 페이지가 서버에서 다시 렌더링됩니다. 업데이트 중인 세그먼트만 렌더링하면 전송되는 데이터 양과 실행 시간이 줄어들어 성능이 향상됩니다.

고급 라우팅 패턴

App Router는 더 고급한 라우팅 패턴을 구현하는 데 도움이 되는 일련의 규칙을 제공합니다. 이에는 다음이 포함됩니다

병렬 라우트: 독립적으로 탐색할 수 있는 두 개 이상의 페이지를 동시에 동일한 뷰에 표시할 수 있도록 합니다. 자체 하위 탐색을 가진 분할 뷰에 사용할 수 있습니다. 예: 대시보드.

라우트 가로채기: 라우트를 가로채고 다른 라우트의 문맥에서 보여줄 수 있도록 합니다. 현재 페이지의 문맥을 유지하는 것이 중요한 경우에 사용할 수 있습니다. 예: 하나의 작업을 편집하는 동안 모든 작업 보기 또는 피드에서 사진 확대. 이러한 패턴을 사용하면 더 풍부하고 복잡한 UI를 구축할 수 있으며, 과거에는 작은 팀과 개발자들이 구현하기 어려웠던 기능을 더 평등하게 사용할 수 있게 됩니다.

요약 및 느낀점

• 앱 라우터는 page 방식의 라우터와 비교했을때 구조및 내부적인 로직 자체가 다른 느낌입니다. 이 부분도 코드 분석을 할 예정입니다.
• 특히 page 방식의 라우터에서는 pages 폴더 안에 components 같은 파일을 만들어도 페이지로 인식해 정적 파일을 생성하는데 앱 라우터에서는 page.js 또는 route.js만 인식하기 때문에 그외의 파일들은 빌드 시 정적 파일로 생성 되지 않아서 상당히 편해 보입니다.
• 고급 라우팅 패턴 또한 고도화된 사용자 시나리오를 별도의 코드 조작 없이 NextJS의 app라우터 방식을 사용하는 것만으로도 간단하게 구현 할 수 있는 것 처럼 보이지만 라우터에 관한 글을 더 읽어보고 테스트 해봐야 될 거 같습니다.

 

참조

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

Building Your Application: Routing | Next.js