Next.js는 지속적으로 진화해 왔으며, 버전 14에서는 App Router의 안정성과 기능이 더욱 강화되었습니다. 이제 개발자는 전통적인 Page Router를 계속 사용할지, 아니면 더 현대적인 컴포넌트 기반 아키텍처를 위한 App Router를 채택할지 전략적인 선택을 해야 합니다. 이 글에서는 Next.js 14에서 App Router와 Page Router의 주요 차이점, 사용 사례, 마이그레이션 고려사항 등을 상세히 비교합니다.
Next.js의 두 가지 라우팅 방식
Next.js는 각각의 장점과 트레이드오프를 지닌 두 가지 라우팅 방식을 제공합니다.
Page Router (pages/)
Page Router는 Next.js의 원래 라우팅 방식으로, pages/ 디렉터리 내부의 파일 구조를 기반으로 라우트를 자동 생성합니다.
주요 특징:
- 평면 디렉터리 구조 기반의 파일 라우팅
- 대괄호(
[param].js)를 이용한 동적 라우팅 지원 getStaticProps,getServerSideProps,getInitialProps등과 연동- 플러그인, 튜토리얼, 커뮤니티 예제가 풍부함
App Router (app/)
App Router는 Next.js 13에서 도입되었으며, 14버전에서 더 발전했습니다. app/ 디렉터리를 기반으로 레이아웃, 템플릿, 로딩 상태, 에러 처리, 서버 컴포넌트를 지원합니다.
주요 특징:
- 중첩된 레이아웃 및 템플릿 지원
- 기본적으로 React Server Components(RSC) 사용
- 데이터 페칭과 UI를 동일 컴포넌트에 위치 가능
- UI와 로직의 명확한 분리 가능
파일 구조 및 라우팅 로직 비교
Page Router 예시
pages/
index.js -> "/"
about.js -> "/about"
blog/[slug].js -> "/blog/:slug"
정적 사이트 생성기나 전통적인 MVC에 익숙한 개발자에게 매우 직관적입니다.
App Router 예시
app/
layout.js -> 모든 라우트에 공통 적용될 글로벌 레이아웃
page.js -> "/"
about/page.js -> "/about"
blog/[slug]/page.js -> "/blog/:slug"
layout.js는 공유 UI를, page.js는 페이지 콘텐츠를 담당하며, loading.js, error.js 등 UX 구성에 활용됩니다.
데이터 페칭 방식 차이
Page Router 방식
Page Router는 다음의 함수들을 제공합니다:
getStaticProps: 정적 사이트 생성용getServerSideProps: 서버 사이드 렌더링용getInitialProps: 하이브리드 렌더링용
유용하지만, 대형 프로젝트에서는 컴포넌트 파일이 복잡해질 수 있습니다.
App Router 방식
App Router는 서버 컴포넌트를 활용하여 별도의 함수 없이 데이터 페칭이 가능합니다.
- UI와 데이터 로직을 동일한 컴포넌트에 구성
- 클라이언트 JS 의존성 최소화
fetch의 옵션(next.revalidate,cache)을 통한 캐싱 제어
렌더링 및 성능 측면 차이
Page Router 성능
Page Router는 클라이언트 사이드 하이드레이션에 크게 의존합니다. SSR도 지원하지만, 대규모 앱에서는 번들 크기와 중복 렌더링 문제가 발생할 수 있습니다.
App Router 성능
App Router는 서버 컴포넌트를 기본으로 하여 JS 번들 크기를 줄이고, 초기 로딩 속도를 개선합니다.
- 빠른 초기 렌더링
- 하이드레이션 비용 감소
- 스트리밍, 캐시 설정에 따라 확장성 증가
단, Suspense, 캐싱 전략 등을 잘 이해하고 사용해야 최적의 성능을 낼 수 있습니다.
개발 경험 및 생태계 성숙도
Page Router
- 익숙하고 문서화가 잘 되어 있음
- 플러그인, 툴과의 호환성 높음
- 새로운 팀에게 이상적
App Router
- 학습 곡선이 있음
- 2025년 기준으로 생태계가 아직 성숙 중
- 퍼포먼스와 구조에 민감한 팀에게 적합
어떤 라우터를 언제 써야 할까?
| 사용 사례 | 추천 라우팅 방식 |
|---|---|
| 소규모~중형 프로젝트 | Page Router |
| 기존 프로젝트 점진적 마이그레이션 | Page Router |
| 중첩 레이아웃 및 상태 공유 필요 | App Router |
| SSR + 캐시 + 스트리밍 활용 시 | App Router |
| 새로운 대형 프로젝트, 스케일 중시 | App Router |
결론: 프로젝트에 맞는 선택이 중요
Next.js 14는 유연함을 제공합니다. Page Router는 여전히 안정적이며 간단한 워크플로에 적합합니다. 반면 App Router는 성능과 구조에서 장점을 갖고 있으며, 향후 유지보수성과 확장성을 고려한다면 최적의 선택입니다.
당신의 Next.js 프로젝트에서는 어떤 라우터를 사용하고 계신가요? 그 경험을 댓글로 공유해 주세요!