[Next] 12. Page Router

📚 Page Router로 Next.js를 한 번 훑어봤다

이제 Page Router 기반으로 Next.js를 한 바퀴 돌았다.
직접 써보니까 어떤 장점과 단점이 있었는지 정리해보자.

 

✅ 장점

1. pages 폴더만으로 라우팅이 자동으로 설정된다
2. pages/ 디렉토리 구조만 잘 잡으면
   별도의 라우팅 설정 없이 경로가 자동으로 매핑된다.
   [id].tsx, [slug].tsx 같은 동적 라우팅도 매우 쉽게 구현할 수 있다.
3. 다양한 렌더링 방식을 지원한다
   • SSR, SSG, ISR 등 상황에 따라 렌더링 전략을 선택할 수 있다.
   • 물론 이걸 현업에서 잘 쓰려면 조금 익숙해져야 하긴 할 것 같다. 하지만 뭐 어쩌겠는가. 도태되지 않으려면 써야죠.

❌ 단점

써보면서 이런 건 좀 불편하더라

1. 페이지마다 레이아웃 설정이 번거롭다
   • 공통 레이아웃을 적용하려면 getLayout 같은 패턴을 직접 구성해야 한다.
   • Layout 컴포넌트를 감싸는 방식이 반복되기 때문에 유지보수에 신경 써야 한다.
2. 데이터 페칭 로직이 페이지 컴포넌트에 집중된다
   • getStaticProps, getServerSideProps 등은 오직 페이지 컴포넌트에서만 사용할 수 있다.
   • 결과적으로 로직이 분산되기 힘들고, 응집도가 낮아질 수 있다.
3. 불필요한 컴포넌트까지 JS 번들에 포함된다
   • Next.js는 페이지 단위로 코드를 분리하지만, 공통 컴포넌트나 상단에 import된 항목들이 필요 없는 페이지에도 로딩될 수 있다.
   • 코드 스플리팅 제어가 어렵고, 결국 번들 크기가 커질 수 있다.

Page Router는 진입 장벽이 낮고, Next.js를 처음 접할 땐 정말 배우기 쉽다.
하지만 프로젝트가 커지고 구조가 복잡해질수록 레이아웃 구성, 데이터 관리, 번들 최적화 같은 부분에서 한계를 느끼게 된다.

그래서 최근에는 App Router로 넘어가는 흐름이 생긴 거다.

 

그러므로, 다음 글 부터는 App Router을 살펴보겠읍니다.

아 존 귀