Next.js App Router 심화 학습

← 메인으로 돌아가기

Next.js 15의 App Router를 실전 예제로 완벽하게 이해하세요.

🚀 App Router란?

App Router는 Next.js 13부터 도입된 새로운 라우팅 시스템으로, React Server Components를 기본으로 사용하여 성능과 사용자 경험을 크게 개선했습니다.

주요 특징

  • • Server Components 기본 지원
  • • Streaming SSR로 빠른 초기 로딩
  • • 파일 시스템 기반 라우팅
  • • Layout과 Template 분리
  • • Server Actions 통합

폴더 구조

  • • page.tsx: 라우트 페이지
  • • layout.tsx: 공통 레이아웃
  • • loading.tsx: 로딩 UI
  • • error.tsx: 에러 핸들링
  • • route.ts: API 핸들러

Server Components vs Client Components

완료

RSC와 Client Component의 차이점과 사용 시나리오

Server ComponentsClient Componentsuse client
예제 보기 →

Streaming & Suspense

완료

Streaming SSR과 Suspense를 활용한 점진적 렌더링

Streaming SSRSuspenseLoading UI
예제 보기 →

Data Fetching Patterns

완료

Server Components에서의 데이터 페칭 패턴과 캐싱 전략

fetch APICacheRevalidate
예제 보기 →

Route Handlers (API Routes)

완료

App Router의 새로운 API Routes 패턴

GETPOSTDynamic Routes
예제 보기 →

Parallel Routes & Intercepting

완료

병렬 라우팅과 라우트 가로채기 패턴

@slotParallel RoutesIntercepting Routes
예제 보기 →

Server Actions

완료

Server Actions를 활용한 폼 처리와 데이터 변경

use serverForm ActionsMutations
예제 보기 →

📊 Pages Router vs App Router

렌더링 방식:SSR/SSG → RSC
데이터 페칭:getServerSideProps → fetch
API Routes:pages/api → app/route
레이아웃:_app.tsx → layout.tsx

⚡ 성능 최적화

  • • Automatic Code Splitting: 페이지별 자동 분할
  • • Streaming: 점진적 렌더링
  • • Smart Caching: fetch 레벨 캐싱
  • • Server Components: JS 번들 크기 감소
  • • Parallel Routes: 동시 렌더링

💡 학습 포인트

1. Server Components 이해: 기본적으로 모든 컴포넌트는 서버에서 렌더링됩니다. 클라이언트 인터랙션이 필요한 경우에만 'use client'를 사용하세요.

2. Streaming 활용: Suspense를 사용하여 중요한 콘텐츠를 먼저 보여주고 나머지는 준비되는 대로 표시하세요.

3. 캐싱 전략: fetch의 캐싱 옵션을 이해하고 적절히 활용하여 서버 부하를 줄이고 응답 속도를 개선하세요.

4. Server Actions: 폼 처리와 데이터 변경을 서버에서 안전하게 수행하고 클라이언트 JavaScript를 최소화하세요.