Next.js] 다시 정리해보는 App Router, 이젠 좀 알 것 같다
카테고리
프로그래밍/소프트웨어 개발
서브카테고리
웹 개발
대상자
- *React/Next.js 개발자, 프론트엔드 기술 습득자, SSR/SSG 구현 필요자**
- 난이도: 중간 (React 기초 및 Next.js 라우팅 이해 필수)*
핵심 요약
- Page Router와 App Router의 주요 차이점
- pages/ 구조 vs app/ 폴더 기반 라우팅
- getServerSideProps → fetch() + 캐시 옵션 사용
- React Server Component (RSC) 도입으로 번들 최적화
- App Router의 핵심 기능
- 중첩 레이아웃 지원 (layout.tsx)
- loading.tsx, error.tsx 기반의 스트리밍 렌더링
- ISR (Incremental Static Regeneration) 자동화
- 데이터 페칭 전략 변화
- getStaticProps → fetch() + cache: 'force-cache'
- revalidatePath()로 캐시 무효화 및 재생성
섹션별 세부 요약
###1. Page Router 기초 구조
pages/폴더 내 파일명이 URL 경로로 매핑- 동적 라우팅:
[id].tsx,[...id].tsx,[[...id]] - 세그먼트(Segment) 개념: URL
/단위로 분할된 조각 - 프리페칭(
Pre-Fetching)으로 사용자 경험 향상
###2. Page Router 데이터 페칭
getServerSideProps→ 요청마다 SSR 수행getStaticProps+getStaticPaths→ SSG 구현- ISR:
revalidate: 10으로 10초 간격 재생성
###3. App Router 핵심 변화
app/폴더 기반 라우팅- React Server Component (RSC) 지원: 정적 컴포넌트 서버 렌더링
- 데이터 페칭:
fetch()+ 캐시 옵션(cache: 'force-cache') - Route Group (
()폴더)으로 레이아웃 그룹화
###4. App Router의 고급 기능
loading.tsx+error.tsx로 에러 처리 및 재시도 지원revalidatePath()+revalidateTag()로 캐시 관리- Parallel Routes 및 Intercepting Routes 지원
###5. Page Router vs App Router 비교
- 레이아웃 관리: Page Router →
getLayout()함수, App Router → 중첩layout.tsx - 데이터 페칭: Page Router → 별도 API, App Router →
fetch()내부 처리 - 성능: App Router → RSC로 번들 크기 감소, ISR 자동화
결론
- App Router를 사용할 때
- app/ 폴더 구조로 레이아웃 관리
- fetch() + cache: 'force-cache'로 데이터 페칭
- revalidatePath()로 실시간 캐시 갱신
- loading.tsx +
- Tip: 새로운 프로젝트는 App Router로 시작하여 React 18 기능(RSC, Suspense) 활용
- 핵심: App Router는 성능 최적화, 캐시 관리, 레이아웃 유연성 측면에서 Page Router보다 우수