서버 중심 라우팅: Next.js의 App Router 분석

App Router는 Next.js의 진화된 라우팅 시스템으로, 기존의 pages/ 디렉토리 기반 라우팅에서 벗어나 새로운 app/ 디렉토리를 통한 라우팅 방식을 도입합니다. 이 시스템은 Next.js의 철학에 따라 모든 기능이 라우터 중심으로 설계되었으며, 페이지 전환, 데이터 페칭, 캐싱, 데이터 변경 및 재검증, 스트리밍 등의 과정을 포괄적으로 관리합니다.

주요 특징:

1. 서버 중심 라우팅: App Router는 React Server Components를 기반으로 구축되었으며, 이는 서버에서 데이터를 효율적으로 가져오는 데 중점을 두고 있습니다.

2. SPA와 유사한 경험: 경로 변경 시 전체 페이지를 리렌더링하지 않고, URL만 업데이트하여 필요한 세그먼트만 렌더링함으로써 단일 페이지 애플리케이션(SPA)과 유사한 사용자 경험을 제공합니다.

3. 코드 단순화 및 최적화: layout, loading, error.js 등 핸들링을 위한 다양한 파일들이 제공되어, 각 상황에 맞는 코드가 파일 내에 존재함으로써 코드의 복잡성을 줄여줍니다. Ex)코드레벨에서 if(error){} 등의 코드가 불필요

4. 서버 컴포넌트 및 클라이언트 컴포넌트: app/ 디렉토리 내의 파일은 기본적으로 서버 컴포넌트로 작동하며, 이는 초기 페이지 로드 속도를 개선하고 캐시 가능성을 높입니다. 클라이언트 컴포넌트는 use client를 명시함으로써 사용할 수 있는데요 클라이언트 컴포넌트란 useState, useEffect 훅을 사용하거나 브라우저 API 의존성이 있거나 특정 이벤트 리스너(onClick, onChange)를 추가하는 경우가 이에 해당 합니다. 그리고 클라이언트 컴포넌트에서는 서버 컴포넌트를 import 할 수 없고 클라이언트 컴포넌트를 트리의 leaf 노드에 가깝게 설계하는것이 좋습니다.

5. 데이터 페칭의 단순화: getServerSideProps, getStaticProps, getInitialProps와 같은 메서드를 더 이상 사용하지 않고, 리액트 서버 컴포넌트 기반 이기 때문에 async/await 문법을 사용하여 서버 데이터를 직접 가져올 수 있습니다. 이는 next/build 시 데이터 페칭을 수행하고 캐싱하는 방식으로, 기존의 useEffect를 사용한 데이터 페칭과 상태 변경 방식에서 벗어남으로써 성능을 개선합니다.

그렇지만 App Router는 아직은 초기 단계로, 일부 라이브러리(예: MSW, Emotion)와의 호환성 문제가 있을 수 있습니다. 또한 기존 Page 기반 라우팅 에서 지원되던, 라우터 이벤트 및, 내장 i18n 지원의 부재, 초기 버그 등 몇 가지 단점이 존재합니다.

그렇지만 이러한 측면을 고려하더라도, App Router는 지속적인 업데이트가 기대되는 만큼 통해 성능 향상에 중요한 역할을 할 것으로 보입니다. Vercel 에서는 App 라우팅 시스템의 사용을 권장하고 있기 때문에, 향후 더 안정적이고 성능이 우수한 웹 애플리케이션 개발을 위한 중요한 도구로 자리 잡을 것으로 보입니다.

https://nextjs.org/docs/app