라우터 선택은 구조 선택

폴더 이름보다 렌더링 경계와 전환 비용을 먼저 본다

Pages Router와 App Router는 모두 파일 시스템 라우팅이지만, 데이터 패칭 위치와 서버/클라이언트 컴포넌트 경계, 점진 전환 전략에서 다른 판단을 요구합니다.

기존 코드와 예측 가능성

Pages Router

페이지 파일이 URL이 되고, 페이지 단위 데이터 함수가 렌더링 방식을 결정합니다.

잘 맞는 상황
이미 안정적으로 운영 중인 서비스

기존 배포 흐름과 팀의 코드 이해도가 높다면 유지 비용이 낮습니다.

데이터 패칭
getServerSideProps / getStaticProps

SSR, SSG, 동적 경로 생성을 페이지 진입점에서 명확히 추적합니다.

주의 지점
중첩 레이아웃과 RSC 중심 설계에는 한계

최신 렌더링 모델을 적극 활용하려면 App Router 전환 범위를 따로 계산합니다.

신규 프로젝트의 기본 선택

App Router

app 디렉터리에서 라우트, 레이아웃, 서버 컴포넌트 경계를 함께 설계합니다.

잘 맞는 상황
새로 시작하거나 큰 구조 개편을 하는 프로젝트

초기 설계부터 서버/클라이언트 책임과 캐싱 정책을 함께 잡기 좋습니다.

렌더링 모델
React Server Components와 Streaming

서버에서 처리할 UI와 브라우저 번들로 보낼 UI를 의도적으로 나눕니다.

핵심 파일
layout.tsx, page.tsx, route.ts

공유 UI, 페이지 화면, HTTP 응답 로직을 예약 파일명으로 구분합니다.