App Router와 Pages Router의 차이는 무엇인가요?

Question

Accepted Answer

Next.js에는 **두 가지 routing 시스템**이 있습니다. **Pages Router**(`pages/`)는 원래의 방식이고, **App Router**(`app/`, Next 13부터)는 React Server Components를 중심으로 만들어진 더 새롭고 권장되는 방식입니다. ## 파일과 컨벤션의 차이 ```text Pages Router (pages/) App Router (app/) ────────────────────────────────────────────────────── pages/about.tsx → /about app/about/page.tsx → /about 기본 export = 페이지 page.tsx = 페이지, layout.tsx = 레이아웃 getServerSideProps (SSR) async Server Component (직접 fetch) getStaticProps (SSG) 캐싱 옵션이 있는 fetch() _app.tsx / _document.tsx 중첩된 layout.tsx 파일들 모든 컴포넌트가 클라이언트 렌더링 기본적으로 Server Component ``` ## 핵심 개념 전환: Server Components ```tsx // App Router — 추가 API 없이 데이터를 직접 페칭하는 Server Component // app/users/page.tsx export default async function Users() { const res = await fetch("https://api.example.com/users"); // 서버에서 실행됨 const users = await res.json(); return

{u.name}

; } ``` App Router에서 컴포넌트는 **기본적으로 Server Component**입니다. 서버에서 실행되고, 데이터를 직접 `await`할 수 있으며, 해당 컴포넌트의 JS를 브라우저로 전혀 보내지 않습니다. 반면 Pages Router는 특별한 함수(`getServerSideProps`)를 사용해 데이터를 클라이언트 렌더링 페이지로 전달했습니다. ## App Router가 더하는 것 - 네비게이션 간에도 유지되는 **중첩 레이아웃**(`layout.tsx`). - **Server Components**(클라이언트 JS 감소, 직접 데이터 접근). - `loading.tsx` / Suspense를 통한 **스트리밍**. - API 라우트 없이 변경(mutation)을 수행하는 **Server Actions**. ## 어느 것을 사용할까 신규 프로젝트에는 **App Router**를 사용하세요. Next.js 개발의 초점이 여기에 있습니다. Pages Router도 여전히 지원되며(두 방식은 하나의 앱에서 공존 가능) 사실상 유지보수 모드에 있습니다. ## 왜 중요한가 App Router는 Next.js의 현재 아키텍처(Server Components, 중첩 레이아웃, 스트리밍)를 대표합니다. 그것이 레거시 Pages Router와 어떻게 다른지 — 특히 서버 우선 기본값과 레이아웃 모델 — 를 아는 것은 현대 Next.js 코드베이스에서 작업하는 데 필수적입니다.