Page Router
Next 초창기부터 제공되어 오던 구 버전의 라우터
장점
- 파일 시스템 기반의 간편한 페이지 라우팅 제공
- 다양한 방식의 사전 렌더링 제공
(SSR, SSG, ISR)
| 설명 |
|---|
| SSR | 요청이 들어올 때 마다 서버에서 사전 렌더링 진행 |
| SSG | 빌드 타임에 미리 페이지 사전 렌더링하여 정적 HTMl 생성 |
| ISR | SSG 페이지 일정 시간마다 재생성 (revalidate) |
단점
- 페이지별 레이아웃 설정이 번거로움 (코드 중복 ↑)
- data fetching이 페이지 컴포넌트에 집중됨
- 불필요한 컴포넌트들도 JS Bundle에 포함됨
App Router
Next 13버전과 함께 처음으로 공개된 신규 라우터
장점
- 유연한 레이아웃 시스템 제공 (중첩 레이아웃, Parallel Routes)
- Server Component 지원 → JS Bundle 크기 절감 가능
- 서버 액션으로 API Route 대체 가능
단점
- 서버 / 클라이언트 각 컴포넌트 분리 필요
- Server Component에서는 브라우저 API 사용 불가 (window, document 등)
- hydration mismatch, suspense 오류 시 디버깅 복잡성 증가