[Next.js] App Router와 Page Router에 대해 알아보자

 

Next.js의 Router (Page Router)

기존 Next.js는 페이지 개념을 기반으로 구축된 파일 시스템 기반 라우터를 사용했다.

/page 디렉터리에 파일이 추가되면 라우팅 설정 필요없이 자동으로 경로로 사용할 수 있었다.

따라서 개발자는 Next.js가 기본으로 제공하는 라우팅을 사용하여 효율적으로 개발이 가능했다.

pages/index.js → /
pages/blog/index.js → /blog

 

위와 같이 /page 디렉터리 안에 디렉터리나 파일을 생성하면 자동으로 라우팅이 가능하다.

 

 

App Router

하지만 Next.js 13부터 App Router가 새로 도입되었다.

App Router는 공유 레이아웃, 중첩 라우팅, 로딩 상태, 오류 처리 등을 지원하는 React Sever Component를 기반으로 구축된 라우터이다.

 

Page

페이지는 경로에 고유한 UI이다.

 

// `app/dashboard/page.tsx` is the UI for the `/dashboard` URL
export default function Page() {
  return <h1>Hello, Dashboard Page!</h1>
}

 

/dashboard로 라우팅 하기위해선

이제 /app 디렉터리 안에 /dashboard 디렉터리를 생성하고 page.js(tsx) 파일을 생성하면 된다.

 

Layout

레이아웃은 여러 페이지 간에 UI를 공유한다.

상태를 유지하고 해당 폴더 내에서 탐색할 때 다시 렌더링되지 않는 장점이 있다.

마치 전역 컴포넌트를 정의한 것과 같이, 디렉터리 내에서의 모든 페이지와 공유된다.

export default function DashboardLayout({
  children, // will be a page or nested layout
}: {
  children: React.ReactNode
}) {
  return (
    <section>
      {/* Include shared UI here e.g. a header or sidebar */}
      <nav></nav>
 
      {children}
    </section>
  )
}

 

Server Component

서버 컴포넌트는 서버에서 실행되며, 클라이언트로 전송되기 전에 서버에서 HTML로 렌더링되는 컴포넌트이다. 

이는 클라이언트 사이드에서의 자바스크립트 실행 부담을 줄여주며, 애플리케이션의 성능을 향상시킬 수 있다.

 

왜냐하면 서버 컴포넌트는 초기 페이지 로딩 시 필요한 최소한의 자바스크립트만을 클라이언트에 전송하기 때문이다.

이로 인해 네트워크 사용량이 감소하고, 초기 페이지 로딩 속도가 빨라진다.

 

그래서 app directory 내부에서는 모든 컴포넌트가 기본적으로 서버 컴포넌트로 동작된다.

 

 

Data Fetching

async function getData() {
  const res = await fetch('https://api.example.com/...');
  // The return value is *not* serialized
  // You can return Date, Map, Set, etc.
  return res.json();
}
 
// This is an async Server Component
export default async function Page() {
  const data = await getData();
 
  return <main>{/* ... */}</main>;
}

 

RSC(React Server Component) 지원으로 Page Router의 getServersideProps, getStaticProps를 사용하지 않고 컴포넌트에서 바로 fetch API를 사용하여 더 직관적으로 데이터를 페칭할 수 있게 되었다.

 

또한 http 요청을 계속 유지하면서 chunk 단위로 렌더링 결과를 전송하는 스트리밍을 지원한다.

데이터가 로딩이 완료된 부분을 먼저 표시함으로써 사용자 경험을 향상시킬 수 있다.

 

 

결론

따라서 App Router는 페이지 개념을 기반으로 구축된 Page Router와 달리 서버 컴포넌트를 기반으로 한 라우터 방식으로, Page Router보다 복잡성이 높지만 성능과 유연성 면에선 훨씬 향상된 라우터 방식으로 볼 수 있겠다.

 

page 디렉터리가 아닌 app 디렉터리에 디렉터리나 파일을 생성하면 자동으로 라우팅이 되고,

layout과 같은 공통 컴포넌트를 제공해 코드 중복을 줄이고 유지보수성을 높인다.

또한 컴포넌트 내에서 fetch API를 사용해 더욱더 직관적으로 데이터를 페칭할 수 있고 스트리밍을 지원해 사용자 경험 역시 향상시킨다.

 

 

 

 

 

 

 

참고

https://nextjs.org/docs/app/building-your-application/routing

Building Your Application: Routing | Next.js

https://www.jadru.com/diffrent-approuter-and-pagerouter#3b8682f35aa049058a215c6cb8b28db9

Next.js 13부터의 App Router와 기존 Page Router의 차이 비교

https://f-lab.kr/insight/understanding-nextjs-and-server-components

Next.js와 서버 컴포넌트의 이해와 활용

https://github.com/jaden2dev/wanted-pre-onboarding-challenge-react/issues/69

2024.05.30 - 이원희 · Issue #69 · jaden2dev/wanted-pre-onboarding-challenge-react