App Router vs Pages Router
Next.js 13부터 도입된 App Router는 기존의 Pages Router를 대체하는 새로운 라우팅 시스템입니다.
이 절에서는 두 라우팅 시스템의 주요 차이점과 App Router의 이점에 대해 살펴보겠습니다.
기본 구조 비교
먼저 두 라우팅 시스템의 기본 구조를 비교해 보겠습니다.
Pages Router
App Router
주요 차이점
1. 디렉토리 구조
- App Router는
app
디렉토리를 사용하며, 각 라우트는 디렉토리로 표현됩니다. - Pages Router는
pages
디렉토리를 사용하며, 각 파일이 라우트가 됩니다.
2. 파일 명명 규칙
- App Router에서는
page.js
가 라우트의 주요 컴포넌트가 되며,layout.js
,loading.js
등 특별한 파일들이 추가되었습니다.
3. 서버 컴포넌트
- App Router는 기본적으로 React Server Components를 사용합니다. 이는 서버 사이드 렌더링의 이점을 극대화합니다.
4. 데이터 페칭
- App Router에서는 컴포넌트 레벨에서 직접 데이터를 페칭할 수 있으며, 이는
getServerSideProps
또는getStaticProps
를 대체합니다.
5. 레이아웃
- App Router는 중첩 레이아웃을 쉽게 구현할 수 있도록 해줍니다.
6. 로딩 상태
- App Router는
loading.js
파일을 통해 각 라우트에 대한 로딩 상태를 쉽게 관리할 수 있습니다.
7. 에러 핸들링
error.js
파일을 통해 각 라우트에 대한 에러 처리를 할 수 있습니다.
코드 예제 비교
다음은 동일한 기능을 구현하는 두 라우팅 시스템의 코드 예제입니다.
Pages Router
App Router
App Router의 이점
- 성능 향상 : Server Components를 통해 초기 페이지 로드 시간을 줄이고, 클라이언트 측 JavaScript를 최소화합니다.
- 코드 구조 개선 : 라우트별로 관련 파일들을 그룹화하여 프로젝트 구조를 더 직관적으로 만듭니다.
- 향상된 타입스크립트 지원 : 파일 기반 라우팅 시스템으로 인해 타입 안정성이 향상됩니다.
- 더 나은 스트리밍과 Suspense 지원 : React 18의 새로운 기능들을 더 잘 활용할 수 있습니다.
비교 표
특징 | Pages Router | App Router |
---|---|---|
기본 디렉토리 | /pages | /app |
파일 기반 라우팅 | ✓ | ✓ |
동적 라우트 | ✓ | ✓ |
중첩 라우트 | 제한적 | ✓ |
레이아웃 | Custom _app.js | layout.js |
서버 사이드 렌더링 | getServerSideProps | Async Server Component |
정적 사이트 생성 | getStaticProps | Async Server Component |
API 라우트 | pages/api | route.js handlers |
미들웨어 지원 | ✓ | ✓ |
TypeScript 지원 | ✓ | ✓ (향상됨) |
4장 라우팅 심화와의 연결
이 절에서 소개한 App Router의 개념은 4장 "라우팅 심화"에서 더 자세히 다루게 됩니다.
특히 동적 라우트, 중첩 라우트, Catch-all 세그먼트, 라우트 그룹 등의 고급 기능들을 실제 예제를 통해 학습하게 될 것입니다. 이를 통해 App Router의 강력한 기능을 최대한 활용하는 방법을 배우게 됩니다.
실습
다음 요구사항을 만족하는 간단한 블로그 라우팅 시스템을 App Router를 사용하여 구현해보세요.
- 홈페이지
/
- 블로그 목록 페이지
/blog
- 개별 블로그 포스트 페이지
/blog/[slug]
- 'About' 페이지
/about
- 모든 페이지에 적용되는 공통 레이아웃
- 블로그 관련 페이지에만 적용되는 레이아웃
이 과제를 통해 App Router의 기본 구조와 특징을 직접 경험해볼 수 있습니다.
완성 후, Pages Router로 동일한 구조를 구현한다면 어떤 차이가 있을지 생각해보세요.