App Router vs Pages Router

 Next.js 13부터 도입된 App Router는 기존의 Pages Router를 대체하는 새로운 라우팅 시스템입니다.

 이 절에서는 두 라우팅 시스템의 주요 차이점과 App Router의 이점에 대해 살펴보겠습니다.

기본 구조 비교

 먼저, 두 라우팅 시스템의 기본 구조를 비교해 보겠습니다.

 Pages Router

pages/
├── index.js
├── about.js
├── blog/
│   ├── [slug].js
│   └── index.js
└── api/
    └── hello.js

 App Router

app/
├── page.js
├── about/
│   └── page.js
├── blog/
│   ├── [slug]/
│   │   └── page.js
│   └── page.js
└── api/
    └── hello/
        └── route.js

주요 차이점

1.  디렉토리 구조 : App Router는 app 디렉토리를 사용하며, 각 라우트는 디렉토리로 표현됩니다. Pages Router는 pages 디렉토리를 사용하며, 각 파일이 라우트가 됩니다.

2.  파일 명명 규칙 : App Router에서는 page.js가 라우트의 주요 컴포넌트가 되며, layout.js, loading.js 등 특별한 파일들이 추가되었습니다.

3.  서버 컴포넌트 : App Router는 기본적으로 React Server Components를 사용합니다. 이는 서버 사이드 렌더링의 이점을 극대화합니다.

4.  데이터 페칭 : App Router에서는 컴포넌트 레벨에서 직접 데이터를 페치할 수 있으며, 이는 getServerSideProps 또는 getStaticProps를 대체합니다.

5.  레이아웃 : App Router는 중첩 레이아웃을 쉽게 구현할 수 있도록 해줍니다.

6.  로딩 상태 : App Router는 loading.js 파일을 통해 각 라우트에 대한 로딩 상태를 쉽게 관리할 수 있습니다.

7.  에러 핸들링 : error.js 파일을 통해 각 라우트에 대한 에러 처리를 할 수 있습니다.

코드 예제 비교

 다음은 동일한 기능을 구현하는 두 라우팅 시스템의 코드 예제입니다.

 Pages Router

// pages/blog/[slug].js
import { useRouter } from 'next/router'
 
export default function BlogPost({ post }) {
  const router = useRouter()
  const { slug } = router.query
 
  return <h1>Blog Post: {slug}</h1>
}
 
export async function getServerSideProps({ params }) {
  const res = await fetch(`https://api.example.com/posts/${params.slug}`)
  const post = await res.json()
  return { props: { post } }
}

 App Router

// app/blog/[slug]/page.js
import { notFound } from 'next/navigation'
 
async function getPost(slug) {
  const res = await fetch(`https://api.example.com/posts/${slug}`)
  if (!res.ok) return undefined
  return res.json()
}
 
export default async function BlogPost({ params }) {
  const post = await getPost(params.slug)
  if (!post) notFound()
 
  return <h1>Blog Post: {params.slug}</h1>
}

App Router의 이점

1. 성능 향상 : Server Components를 통해 초기 페이지 로드 시간을 줄이고, 클라이언트 측 JavaScript를 최소화합니다.
2. 코드 구조 개선 : 라우트별로 관련 파일들을 그룹화하여 프로젝트 구조를 더 직관적으로 만듭니다.
3. 향상된 타입스크립트 지원 : 파일 기반 라우팅 시스템으로 인해 타입 안정성이 향상됩니다.
4. 더 나은 스트리밍과 Suspense 지원 : React 18의 새로운 기능들을 더 잘 활용할 수 있습니다.

비교 표

4장 라우팅 심화와의 연결

 이 절에서 소개한 App Router의 개념은 4장 "라우팅 심화"에서 더 자세히 다루게 됩니다. 특히 동적 라우트, 중첩 라우트, Catch-all 세그먼트, 라우트 그룹 등의 고급 기능들을 실제 예제를 통해 학습하게 될 것입니다. 이를 통해 App Router의 강력한 기능을 최대한 활용하는 방법을 배우게 됩니다.

실습

 다음 요구사항을 만족하는 간단한 블로그 라우팅 시스템을 App Router를 사용하여 구현해보세요.

1. 홈페이지 /
2. 블로그 목록 페이지 /blog
3. 개별 블로그 포스트 페이지 /blog/[slug]
4. 'About' 페이지 /about
5. 모든 페이지에 적용되는 공통 레이아웃
6. 블로그 관련 페이지에만 적용되는 레이아웃

 이 과제를 통해 App Router의 기본 구조와 특징을 직접 경험해볼 수 있습니다.

 완성 후, Pages Router로 동일한 구조를 구현한다면 어떤 차이가 있을지 생각해보세요.