responsibility map
두 라우터의 차이는 책임이 어디에 모이는지로 압축된다
데이터 패칭, 레이아웃, 컴포넌트 경계를 보면 단순 폴더 구조 비교보다 선택 기준이 더 또렷해진다.
데이터
Pages
`getServerSideProps`, `getStaticProps`가 페이지 단위 책임을 가진다.
App
server component와 `fetch` cache 정책이 route 안에 놓인다.
레이아웃
Pages
공통 layout을 앱 수준에서 감싸는 방식이 많다.
App
nested layout으로 URL 구간마다 책임을 나눈다.
경계
Pages
React 페이지 중심이라 클라이언트 코드가 자연스럽게 커진다.
App
서버 우선, 필요한 곳만 `use client`로 분리한다.
핵심:
App Router는 route 안에서 데이터, 레이아웃, 서버/클라이언트 경계를 함께 설계하게 만든다.