Next.js의 App Router와 Pages Router

※ 해당 글은 Next.js 13.4.0 이후 버전 기준 App Router와 Page Router의 차이를 비교한 글입니다.

 

Routing

nextjs는 파일 시스템을 기반으로 라우팅을 구현한다.

Built-on

App Router

서버 중심 라우팅 Next.js 13.4.0 버전의 App Router는 서버 중심 라우팅 방식으로, React Server Components를 사용하여 구현되었다. 가장 큰 변화로는, 서버에서 데이터를 조금 더 쉽게 가져오게 되며, 페이지 이동 시에도 페이지를 재렌더링하지 않고 SPA(Single Page Application)처럼 URL만 업데이트하여 변경된 부분만 렌더링 하는 방식을 제공한다.

• React Server Components를 기반으로 한 서버 중심 라우팅
  • React Server Components를 기반으로 하여, 서버 측에서 React 컴포넌트를 렌더링 할 수 있게 되었다. 이는 효율적인 데이터 페칭과 향상된 사용자 경험을 가능하게 한다.
  • 데이터 페칭이 서버 중심으로 이뤄지기 때문에, 서버에서 직접 필요한 데이터를 처리하고 결과를 클라이언트로 보낸다. 이는 웹 애플리케이션의 성능을 크게 향상시킬 수 있다.
• SPA와 유사한 사용자 경험 제공
  • 사용자가 다른 페이지로 이동할 때 전체 페이지를 리랜더링 하지 않고, 필요한 부분만 업데이트한다. 따라서 사용자는 웹 애플리케이션을 더 빠르고 부드럽게 탐색할 수 있게 된다. 이를 통해 SPA와 유사한 사용자 경험을 제공하며, 이는 서버 중심 라우팅의 큰 장점 중 하나라고 할 수 있다.

Pages Router

클라이언트 중심 라우팅

• 빠른 사용자 인터페이스 반응: 클라이언트 중심 라우팅은 페이지의 일부만을 동적으로 업데이트함으로써 사용자에게 빠른 인터페이스 반응을 제공한다. 이는 전체 페이지를 다시 불러오는 것보다 훨씬 빠른 속도로 사용자 경험을 향상 시킨다.
• 효율적인 자원 활용: 필요한 부분만을 업데이트함으로써 네트워크 사용량과 서버 부하를 줄일 수 있습니다.

 

Location

App Router

• app 디렉토리 사용(/app or src/app)
• app 하위에 모든 파일을 함께 구성할 수 있습니다.
  • 디렉토리로 경로 정의
  • 페이지를 위한 파일은 page.js
  • server-side API를 위한 파일은 route.js
  • 나머지 파일 컨벤션은 여기를 참고
• pages router 보다 우선순위가 높다.

출처 : https://nextjs.org/docs/app/building-your-application/routing#colocation

 

 

Pages Router

• pages 디렉토리를 사용
• pages 하위에 있는 모든 JS 파일이 페이지/API 경로가 된다.
  • 디렉토리, 파일명으로 경로 설정
    • pages/index.js =>/
    • pages/a-page.js => /a-page
    • pages/b-page/index.js => /b-page
    • pages/b-page/b-subpage.js => /b-page/b-subpage
    • pages/b-page/component.js => /b-page/component // 모든 파일이 경로가 되어버림
  • 따라서 component.js 같은 파일은 pages 디렉토리 외부에 위

 

Location

App Router

• app 디렉토리 내에 root layout을 필수로 포함해야 한다.
• root layout뿐 아니라 각 layout을 compose 할 수 있다.
• 데이터 패칭 또한 동시에 가능합니다.

Pages Router

• 전역 공유 layout을 지정하기 위해 _app을 사용한다.
  • 단, 여러 layout을 compose 수 없다.
  • data fetching과 component를 함께 배치할 수 없다.

 

Advanced

App Router

• Parallel Routes : 동일한 레이아웃에서 하나 이상의 페이지를 동시/조건부로 렌더링 할 수 있음
• Intercepting Routes : 현재 페이지의 컨텍스트를 유지하면서 현재 레이아웃 내에서 경로를 로드할 수 있음
  • ex) A 페이지(/feed)에서 모달을 띄울 때, A페이지를 유지하면서 모달의 경로로 url을 변경 (post/13)할 수 있다. 이때, A페이지는 모달 뒤에 유지.

 

Rendering

SSG(Static Site Generation)

App Router

• server/client component에 따라 다르게 동작합니다.
  • server component는 렌더링 되어 HTML을 생성합니다.
    • 관련 javascript 코드가 클라이언트로 전송되지 않습니다.
  • client component는 HTML 및 JSON을 미리 렌더 하고, 서버에 캐싱됩니다.
    • 캐싱 결과는 클라이언트로 전송되어 hydration 됩니다

Pages Router

• app router의 client component와 동일하게 동작.

ISR (incremental static regeneration)

Pages Router

• SSG는 최초 빌드 시에 생성한 정적페이지를 캐싱하고 계속 사용하지만, ISR은 주기적으로 정적페이지를 재생성.
  • getStaticProp의 반환값에 revalidate 필드를 추가하면 됨.

SSR (server side rendering)

App Router

• 공식문서(app router)에서는 Dynamic Rendering이란 명칭으로 언급
• 정적 렌더링 중에 동적기능 / 동적 fetch(), searchParams prop 등이 감지되면 해당 경로를 Dynamic Rendering 대상으로 판단합니다
  • 동적기능 : cookies(), headers() in server component
  • 동적 fetch() : no-store , revalidate : 0 옵션이 있는 fetch

Pages Router

• 페이지에 접근할 때마다 필요한 데이터를 가져오고 서버에서 렌더링
• getServerSIdeProps를 사용

Data Fetching

Method

App Router

• getServerSideProps, getStaticProps, getInitialProps와 같은 메서드는 더 이상 사용하지 않음.
• react server component 기반이기 때문에, 일반적인 방법으로 서버 데이터를 가져온다.
  • 서버 데이터베이스 리소스에 직접 접근 가능
  • 민감한 정보 클라이언트에 노출 x
  • 성능향상
  • 빌드(next build) 시에 데이터 패칭이 이루어지고, 캐싱됨.
  • useEffect를 사용하여 데이터를 패칭 하고, 상태를 변경하는 방식에서 벗어난다.
• 클라이언트 측에서 데이터를 가져오는 것도 여전히 가능
• 요청을 캐싱하고, 중복 제거 (POST 제외)

Pages Router

• getinitialProps : 이미 서버에 있는 데이터를 이용해서 서버 사이드 렌더링을 할 때 사용한다.
• getServerSIdeProps : 페이지 접근할 때마다 서버 사이드 렌더링에 필요한 데이터를 가져올 때 사용(최신 데이터가 필요할 때)
• getStaticProps : next build 시 정적 페이지를 생성할 때 필요한 데이터를 가져올 때 사용.

 

Static Export

next는 기본적으로 모든 경로의 페이지에 대한 HTML 파일을 사전 렌더링. SSG (Static-Site-Generation)

공식문서에서는 app router를 사용하는 것을 권장. (static export와 관해 기능 추가됨)

Data Fetching

App Router

react server component를 사용하기 때문에 getStaticProps가 필요하지 않다.

async/await 문법으로 바로 데이터를 가져올 수 있음.

Pages Router

getStaticProps : 정적페이지 생성 시 필요한 데이터를 패칭 해서 컴포넌트에 전달.

 

Dynamic Path

App Router

getStaticPaths 대신 generateStaticParams를 사용

Pages Router

getStaticPaths : 동적 경로의 정적페이지를 생성할 때 사용

 

Supported Feature

App Router

• image optimization
  • 기존(next@12) next/image → next/legacy/image로 경로 변경
  • 기존 next/futrue/image → next/image로 경로 변경
  • next/image를 사용하려면 이미지들에 대한 alt를 모두 넣어주지 않으면 빌드가 되지 않고, px값을 모두 명시적으로 적어줘야 함.
• Server/Client Component
  • 최 상단에 “use server”, “use client”를 기입해야 함.
• route handlers
  • next build 시 정적 응답 객체 생성 가능
• Browser APIs
  • Client Component의 경우에 window 객체에 접근한다던가 가능
• 참고 : https://nextjs.org/docs/app/building-your-application/deploying/static-exports#supported-features