React App Router, Page Route

Pages Router (기존 방식)

/pages 디렉토리를 기준으로 라우팅을 자동 생성하는 Next.js의 전통적인 라우팅 시스템입니다.
Next.js 12까지 기본값이었죠.

구조 예시

pages/
 ├── index.tsx         // => /
 ├── about.tsx         // => /about
 └── blog/
     └── [id].tsx      // => /blog/:id

작동 방식

• 파일 경로 = 라우트 경로
• getServerSideProps, getStaticProps, getStaticPaths 등으로 데이터 페칭 로직 분리
• pages/_app.tsx로 전역 레이아웃 관리
• pages/_document.tsx로 HTML 구조 커스터마이징

장점

• 익숙하고 단순하다.
• 파일 기반 자동 라우팅으로 진입장벽이 낮다.
• 기존 SSR(서버사이드렌더링) 패턴과 호환성이 좋다.

단점

• 클라이언트/서버 컴포넌트 개념이 없음 → 모든 컴포넌트가 CSR 기반.
• 데이터 fetching과 UI 구성이 분리되어 복잡해짐.
• Suspense, Streaming 등 React 18 기능을 활용하기 어렵다.

 

 

---

 

App Router (Next.js 13~15의 새로운 표준)

/app 디렉토리 기반으로 구성되는 새로운 라우팅 시스템으로,
React Server Components (RSC) 를 중심으로 설계되었습니다.

구조 예시

app/
 ├── layout.tsx         // 모든 하위 경로 공통 레이아웃
 ├── page.tsx           // => /
 ├── about/
 │   ├── page.tsx       // => /about
 │   └── layout.tsx     // about 전용 레이아웃
 ├── blog/
 │   └── [id]/page.tsx  // => /blog/:id
 └── loading.tsx        // 로딩 상태 표시 (Suspense 기반)

작동 방식

• 각 폴더 단위로 route segment 관리.
• layout.tsx, page.tsx, loading.tsx, error.tsx 등으로 세분화된 구조.
• Server Component / Client Component 분리 ('use client' 키워드).
• React 18 기능 (Suspense, Streaming, Concurrent Rendering) 완벽 지원.

데이터 페칭 방식

// 예시: app/users/page.tsx
import { getUsers } from '@/lib/api';

export default async function Page() {
  const users = await getUsers(); // 서버에서 직접 실행
  return (
    <ul>
      {users.map(user => <li key={user.id}>{user.name}</li>)}
    </ul>
  );
}

• 클라이언트 요청 없이 서버에서 직접 데이터 fetch
• 별도의 getServerSideProps 필요 없음

장점

• 서버에서 데이터 fetch + 렌더 → 빠른 초기 로드
• layout.tsx로 중첩 레이아웃을 자연스럽게 구성 가능
• Suspense 기반 로딩 처리, 에러 경계(error boundary) 지원
• 클라이언트 번들 크기 감소

단점

• 진입장벽이 높다 (RSC 개념 이해 필요)
• 일부 라이브러리(Client 전용) 사용 시 'use client' 선언 필요
• pages와 app을 혼용하면 구조가 헷갈릴 수 있다

 

---

App Router vs Page Router 비교 

구분	Pages Router	App Router
디렉토리	/pages	/app
렌더링 방식	CSR/SSR 분리	RSC 기반 (SSR + CSR 혼합)
데이터 패칭	getServerSideProps 등	fetch 직접 호출 (async component)
레이아웃 관리	_app.tsx	layout.tsx (중첩 가능)
Suspense/Streaming	미지원	지원
SEO	SSR 지원	SSR + Streaming

 

 

신규 프로젝트라면 → App Router

• RSC 기반 구조가 Next.js의 미래 표준입니다.
• 코드 스플리팅, 데이터 fetching 단순화, SEO 개선 효과 모두 포함.

기존 프로젝트라면 → 점진적 전환

• /pages와 /app을 동시에 사용할 수 있습니다.
• 점진적으로 /app 디렉토리로 옮기며 SSR 로직을 통합하세요.