App Router VS Pages Router

예전의 전통적인 방식 : Pages Router

13버전 이후의 방식 :  App Router

 

리액트와 넥스트에서의 라우팅 구현 방법

리액트 : react-router-dom을 이용해서 구현

넥스트 : 파일 시스템 베이스 라우팅 (or 폴더구조기반)으로 자동으로 제공해준다.

- 페이지라우터

: pages 폴더에 원하는 페이지의 파일 이름을 둔다

 

pages 

ㄴ about.js

ㄴ index.js

/about > 으로 자동으로 들어갈수 있다.

 

- 앱라우터 

app폴더 밑 폴더명을 기반으로 자동 라우팅이 된다.

각 폴더 아래에 page.js 파일이 있고, 이 파일이 /about 에 자동으로 페이지를 그려준다.

 

그러면 대체 어떤걸 써야할까?

 

공식문서에 따르면 앱라우터를 추천한다고 한다.

그렇지만 어떤 차이점이 있는지 알고, 상황에 맞추어서 써야하기때문에 차이를 알아두면 좋을거같다!

Pages Router&App Router

라우팅 방식	파일 기반 (/pages 폴더)	폴더 기반 (/app 폴더)
렌더링 방식	CSR, SSR, SSG, ISR 모두 지원	서버 컴포넌트 + 클라이언트 컴포넌트
데이터 가져오기	getStaticProps, getServerSideProps	fetch() 및 서버 컴포넌트에서 처리
API 라우팅	/pages/api 폴더 사용	/app/api 폴더 사용
동적 라우팅 (Dynamic Routes)	[id].js	[id]/page.js
레이아웃 재사용	_app.js와 _document.js 사용	layout.js 파일로 더 유연하게 구현
병렬/중첩 라우팅 (Parallel Routes)	불가능	가능 (특정 페이지 내 다양한 영역 렌더링)
성능 최적화	기본적인 최적화	서버 컴포넌트를 통한 성능 향상
지원 여부	유지보수는 되지만 새로운 기능 없음	최신 기능 지속 업데이트 및 공식 권장