App Router 판단

App Router 전환 기준

App Router는 폴더를 바꾸는 수준이 아니라 화면 계층과 서버 실행 위치, 캐시 정책을 함께 고정하는 선택입니다.

01

중첩 레이아웃

layout.tsx로 공유 UI를 라우트 계층에 붙이고, 화면마다 반복하던 wrapper를 줄입니다.

02

서버 컴포넌트 우선

데이터 조회와 정적 UI는 서버에 두고, 이벤트가 필요한 부분만 use client 경계로 분리합니다.

03

fetch 캐시 정책

getStaticProps 대신 요청별 캐시, 재검증, 동적 렌더링 범위를 fetch 옵션으로 정합니다.

Pages Router 프로젝트에서 먼저 대조할 항목

데이터 함수 getServerSideProps 중심 화면 서버 컴포넌트와 Route Handler로 책임을 나눌 수 있는지 봅니다.
공유 UI 페이지마다 반복되는 header, nav, auth wrapper layout.tsx 계층으로 옮겼을 때 중복이 줄어드는지 확인합니다.
브라우저 상태 초기 렌더링에 필요 없는 클라이언트 로직 상호작용 컴포넌트만 얇게 분리하면 번들 크기 비교가 쉬워집니다.