[Next.js] App Router vs. Page Router

< 목차 >

1. Page Router

2. App Router (Next.js 13+)

3. 주요 차이점

 

 

Next.js 공식 문서: https://nextjs.org/docs/app/building-your-application/routing

 

Next.js에서의 Routing 방식은 총 2가지다.

전통적인 파일 라우팅 방식인 Page Router와 서버 중심의 렌더링 최적화를 제공 중인 새로운 라우팅 방식인 App Router.

 

이 둘의 차이점과 Next.js에서 추천하고 있는 라우팅 방식에 대해 알아보자.

 

결론부터 말하자면, Next.js에선 App Router를 추천 중이다.

정확히 어떤 차이가 있길래 Next.js는 App Router를 추천할까?

바로 App Router에서는 최신 기술과 구조적 이점을 최대한 활용할 수 있기 때문이다.

 

다음에 내용에서 둘의 차이에 대해 좀 더 자세히 알아보도록 하자.

 

 

1. Page Router

[출처] Navigating Next.js: Choosing Between App Routing and Page Routing (https://medium.com/@kadampritesh46/navigating-next-js-choosing-between-app-routing-and-page-routing-85e1c08d8921)

 

: Next.js의 전통적인 파일 기반 라우팅 방식

 

개념

- pages/ 디렉토리 내에 파일을 생성하면 해당 파일명이 자동으로 라우트가 됨

- 각 페이지는 React 컴포넌트로 동작하며, 서버 사이드 렌더링(SSR), 정적 사이트 생성(SSG), 클라이언트 사이드 렌더링(CSR)을 지원\

 

특징

- 간단하고 직관적인 라우팅 구조

- getServerSideProps, getStaticProps, getInitialProps로 데이터 패칭 처리

- 각 파일이 라우트 단위

 

장점

- 기존 프로젝트와 호환성 뛰어남

- 간단하고 익숙한 구조

- SSR/SSG/CSR에 대한 명확한 제어 가능

 

 

2. App Router (Next.js 13+)

: Next.js 13에서 도입된 새로운 라우팅 방식

 

개념

- app/ 디렉토리를 기반으로 작동

- React Server Components(RSC)를 활용해 서버 중심의 렌더링 최적화 제공

 

특징

- 더 유연한 라우팅: layout.js, loading.js, error.js 등을 활용한 구조화된 페이지 관리

- 데이터 패칭 방식 통합: 서버 컴포넌트에서 fetch와 같은 표준 API를 사용

- 코드 스플리팅 및 병렬 데이터 패칭

- React Suspense와 함께 작동

 

장점

- 더 나은 성능: React Server Components와 병렬 데이터 패칭으로 성능 최적화

- 유연한 구조: 레이아웃, 로딩 상태, 에러 상태 관리가 파일 단위로 체계화

- 최신 React 기능 활용: Suspense, Server Components 등 최신 기술 활용 가능

- SEO 친화적: 서버 중심 구조로 SEO 최적화

 

 

3. 주요 차이점

특징	Page Router	App Router
디렉토리	pages/	app/
데이터 패칭 방식	getServerSideProps, getStaticProps	fetch 및 React 표준 API
React 버전	React 17+	React 18+
상태 관리	클라이언트 중심	서버 중심 (React Server Components)
레이아웃	중복 가능 (파일마다 정의 필요)	layout.js로 계층적 관리 가능
렌더링 방식	CSR, SSR, SSG	서버 중심 (RSC + CSR)