App Router vs Pages Router
Next.js를 처음 접하시는 분들이라면, 아마 "어떤 방식으로 페이지를 구성해야 하지?"라는 의문을 가지실 수 있습니다. Next.js는 애플리케이션의 라우팅(Routing)을 처리하는 두 가지 주요 방식을 제공합니다. 바로 Pages Router와 App Router입니다. 이 두 가지 방식은 Next.js 애플리케이션을 구축하는 방식에 상당한 차이를 가져오며, Next.js 13부터 등장한 App Router는 Next.js 개발의 새로운 표준으로 자리 잡고 있습니다.
Pages Router: 익숙함 속의 효율성
Next.js의 초기부터 함께 해온 Pages Router는 파일 시스템 기반 라우팅을 사용합니다. pages 디렉터리 안에 React 컴포넌트를 정의하면, 해당 파일의 경로가 웹 애플리케이션의 URL 경로로 자동으로 매핑됩니다. 예를 들어, pages/about.js 파일은 /about 경로에 접근했을 때 렌더링됩니다.
Pages Router의 주요 특징
- 파일 시스템 기반 라우팅: 직관적이고 설정이 간단하여 빠르게 페이지를 만들 수 있습니다.
- 쉬운 학습 곡선: React 개발자에게 익숙한 방식으로, 새로운 개념을 많이 익히지 않아도 됩니다.
- 데이터 페칭 방식:
getServerSideProps,getStaticProps,getStaticPaths와 같은 함수를 사용하여 서버 사이드 렌더링(SSR)이나 정적 사이트 생성(SSG)을 구현합니다.
Pages Router는 특히 소규모 프로젝트나 빠른 프로토타이핑에 매우 효율적입니다. 하지만 복잡한 레이아웃이나 데이터 관리가 필요한 대규모 애플리케이션에서는 관리가 어려워질 수 있다는 단점도 있습니다.
App Router: 미래를 위한 혁신
Next.js 13부터 도입된 App Router는 React의 최신 기능인 React Server Components(RSC) 와 스트리밍(Streaming) 을 기반으로 설계되었습니다. App Router는 app 디렉터리 안에서 라우팅과 컴포넌트 구조를 정의하며, Pages Router와는 근본적으로 다른 접근 방식을 취합니다.
App Router의 주요 특징
- React Server Components(RSC): 컴포넌트를 서버에서 렌더링하여 클라이언트로 전송함으로써 초기 로딩 속도를 획기적으로 개선하고, 클라이언트 번들 크기를 줄여줍니다.
- 스트리밍: 페이지의 일부만 먼저 클라이언트에 전송하여 사용자에게 빠르게 보여주고, 나머지 콘텐츠는 백그라운드에서 로딩하는 방식으로 사용자 경험을 향상시킵니다.
- 레이아웃(Layouts): 여러 페이지에서 공유되는 UI를 쉽게 정의하고 중첩할 수 있어 코드 재사용성과 유지보수성이 뛰어납니다.
- 데이터 페칭:
fetchAPI를 확장하여 더욱 유연하고 강력한 데이터 페칭 기능을 제공하며, 캐싱 전략을 세밀하게 제어할 수 있습니다. - 향상된 SEO 및 성능: 서버에서 렌더링되는 부분이 많아 검색 엔진 최적화에 유리하며, 전반적인 성능이 향상됩니다.
App Router는 Pages Router에 비해 초기 학습 곡선이 다소 높을 수 있지만, 대규모의 복잡한 애플리케이션을 구축하고 최적의 성능을 끌어내야 할 때 그 진가가 발휘됩니다. Next.js 15는 App Router를 기본 라우터로 권장하며, 앞으로의 Next.js 개발은 App Router 중심으로 이루어질 것입니다.
어떤 라우터를 선택해야 할까요?
이 책에서는 App Router를 중심으로 Next.js 15의 모든 기능을 다룰 예정입니다. App Router는 Next.js의 미래이며, 웹 애플리케이션 개발에 있어 더 많은 유연성과 성능 최적화 기회를 제공합니다.
물론 기존 Pages Router 프로젝트를 App Router로 마이그레이션하는 방법도 간략히 다루겠지만, Next.js의 최신 트렌드와 강력한 기능을 온전히 경험하기 위해 App Router에 집중하는 것이 현명한 선택입니다.
이제 App Router와 Pages Router의 차이에 대해 이해하셨으리라 생각합니다.