반응형
| Page Router | App Router | |
| 기본단위 | 페이지 | 컴포넌트 분리 |
| 렌더링 | CSR/SSR/SSG를 페이지 단위로 선택 | RSC 기본 |
| 데이터 패칭 | getServerSideProps, getStaticProps | 서버 컴포넌트에서 fetch |
| 구조 | 레이아웃 재사용 불편(공통 layout 직접 처리) | layout.tsx로 중첩 레이아웃 자연스럽게 구성 |
| 한계 | 서버, 클라이언트 책임이 엮이기 쉬움 | Streaming, Suspense, Route Segment |
App Router
1. 서버, 클라이언트 책임 분리 명확 : 기본이 Server Component -> 클라이언트 JS 감소
2. 성능
- 불필요한 Hydration 최소화
- Streaming으로 초기 응답 빠름
3. 구조적 설계
- 레이아웃/라우팅이 트리구조로 명확
- 서비스 단위 확장에 유리
4. 데이터 흐름 단순화
- getServerSideProps 제거
- fetch + 캐시 정책으로 일관된 패턴
반응형
'한번쯤 들어본 FE 기술' 카테고리의 다른 글
| 데이터 흐름과 props (0) | 2025.03.12 |
|---|---|
| State Hooks (0) | 2025.03.12 |
| [typescript] type 과 interface (0) | 2025.03.12 |
| 비동기 데이터 처리(React Query) (0) | 2025.03.12 |
| 성능 최적화 (0) | 2025.03.12 |