App Router

개념 설명

Next.js 13+의 App Router는 React Server Components 기반으로 파일 시스템 라우팅과 서버/클라이언트 컴포넌트 분리를 제공하는 새로운 라우팅 시스템.

핵심 포인트

• Server Components: 기본값, 서버에서 렌더링되어 번들 크기 감소와 SEO 최적화
• Client Components: 'use client' 지시어, 브라우저 상호작용과 상태 관리 담당
• Data Fetching: async/await 직접 지원, 병렬/순차 패칭 패턴 활용 가능
• Loading/Error UI: loading.js, error.js 파일로 특수 UI 자동 처리
• Route Handlers: app/api 디렉토리에서 REST API 엔드포인트 구현
• Metadata: 정적/동적 메타데이터 관리, SEO와 소셜 미디어 최적화

예시 코드

// Server Component (기본값)
async function ProductList() {
  const products = await fetch('/api/products').then(r => r.json());
  
  return (
    <div>
      {products.map(product => (
        <ProductCard key={product.id} product={product} />
      ))}
    </div>
  );
}