Next.js의 App Router와 Page Router 차이점, 무엇을 쓰는게 좋을까요?

Next.js는 React 기반의 프레임워크로, 웹 개발자들에게 파일 기반 라우팅을 제공합니다. Next.js 13에서는 새로운 라우팅 시스템인 App Router가 도입되었으며, 기존 Page Router와 함께 사용 가능합니다.

이 글에서는 App Router와 Page Router의 차이점, 각각의 특징, 그리고 어떤 상황에서 어떤 라우팅 방식을 선택해야 하는지 명확하게 설명하겠습니다.

---

1. App Router와 Page Router란?

App Router (Next.js 13 이상)

• 기반 디렉토리: app/
• React의 서버 컴포넌트(Server Components)를 기본으로 사용.
• 더 나은 레이아웃 재사용과 중첩 라우팅을 제공.
• 서버 사이드 데이터 패칭과 클라이언트 컴포넌트를 혼합하여 효율적인 UI 구축 가능.

Page Router (Next.js 12 이하)

• 기반 디렉토리: pages/
• React의 클라이언트 컴포넌트(Client Components)를 기본으로 사용.
• 기존의 단순하고 직관적인 라우팅 방식.
• getServerSideProps, getStaticProps를 사용하여 서버 사이드 데이터 패칭 처리

---

2. 주요 차이점 비교

특성	App Router ( app / )	Page Router ( pages / )
도입 버전	Next.js 13 이상	Next.js 12 이하
기반 디렉토리	app/	pages/
React 컴포넌트	서버 컴포넌트 기본	클라이언트 컴포넌트 기본
라우팅 방식	중첩 라우트 및 파일 기반	단일 파일 기반
데이터 패칭	React 서버 컴포넌트 내부에서 직접 패칭	getServerSideProps, getStaticProps 사용
레이아웃	layout.tsx으로 중첩 레이아웃 지원	_app.js로 전역 레이아웃만 지원
학습 곡선	상대적으로 가파름	상대적으로 낮음
성능	서버 컴포넌트로 성능 최적화	클라이언트 컴포넌트 중심

 

App Router의 주요 특징

1. 중첩 레이아웃 지원:
   • layout.tsx 파일을 통해 페이지 간 레이아웃을 재사용 가능.
   • 예: 공통 네비게이션 바를 각 페이지에서 유지.
2. 서버 컴포넌트 기본 지원:
   • 서버에서 렌더링 후 클라이언트에 전달하여 초기 로딩 속도를 향상.
   • 클라이언트에서만 필요한 로직은 use client를 사용해 구현.
3. React의 최신 기능과 통합:
   • React 서버 컴포넌트와 use 훅으로 데이터를 선언적으로 패칭.

---

Page Router의 주요 특징

1. 간단한 구조:
   • 모든 라우트가 pages/ 디렉토리 내 파일로 정의.
   • 빠르게 설정하고 이해할 수 있음.
2. 전역 레이아웃 지원:
   • _app.js 파일에서 전체 애플리케이션의 공통 로직 작성 가능.
3. 명시적인 데이터 패칭:
   • getServerSideProps, getStaticProps, getInitialProps로 서버 측 데이터 로직을 구현.

---

3. 어떤 라우팅 방식을 선택해야 할까?

App Router를 선택해야 하는 경우(보통 앱라우터 사용)

• 최신 Next.js 기능을 활용하고 싶을 때.
• 서버 컴포넌트와 중첩 레이아웃으로 더 효율적인 UI를 설계하고 싶을 때.
• 장기적인 프로젝트에서 더 모던한 구조가 필요한 경우.

Page Router를 선택해야 하는 경우

• 단순한 프로젝트를 빠르게 시작해야 할 때.
• Next.js에 처음 입문하는 경우.
• 기존 pages/ 디렉토리 기반의 코드를 유지보수해야 할 때.

---

하지만 보통, 그리고 저 역시 App Router를 사용합니다. 떄에 따라 Page Router가 좋을 때도 있겠지만, 새로운 기능은 App Router에서 지원할 뿐더러 더 간편하고 기능이 많은데 마다할 이유가 없더라고요. 여러분도 본인에게 맞는 라우팅 방식을 이용하면 좋을 것 같습니다.