Page Router에서 App Router로, 왜 바뀌었을까?

CSR vs SSR

Router 차이를 설명하기 전에 먼저 SSR의 등장부터 이해할 필요가 있다.

CSR는 초기접속이 느리고 SEO가 불리하다는 치명적인 단점이 있었는데

SSR의 사전렌더링으로 CSR의 단점들을 해결할수 있다.

 

아래는 SSR의 사전렌더링 과정을 한눈에 볼수있어서 가져왔다.

CSR은 빈껍데기를 화면에 먼저 렌더링시켜버리는 반면 SSR은 서버에서 미리 렌더링시켜 유저에게 뿌리기때문에

FCP(First Contentful Paint) : 사용자가 페이지 접속후 첫콘테츠를 만나는 시간을 나타내는 지표 가 굉장히 유리해지게된다.

출처 - 이정환님의 Next.js 강의

 

Next12까지 page Router로 SSR을 도입하면서 데이터 패칭과 렌더링을 분리했는데 이 방법도 곧 한계를 보이고만다.

페이지 전체가 SSR되면서 굉장히 비효율적이며,

모든 컴포넌트가 클라이언트 기준이 되고, 레이아웃이 계속 재렌더링된다는 문제가 잇었던것이다.

 

그래서 이문제를 또다시 해결하기위해 Next13 버전부터 app Router가 도입이 되었고

현재기준 Next16까지 지금까지도 많은 풀스택 기능들을 쓸수있게 업데이트 되고 있다!

 

 

뭐든 공식문서가 짱이니 Next가 궁금한 사람이라면 한번씩 들러보길 츄라이츄라이

https://nextjs.org/docs

Next.js Docs | Next.js

 

 

이제부터 본격 Page Router와 App Router 차이를 본격 비교해보자!

 

라우팅 방식 차이

페이지라우터보다 앱라우터가 러닝커브가 높다곤 하지만 솔직히 라우팅 개념 자체가 어려운편이 아니라서

그냥 한번쓱보면 다들 이해가 갈것이다 (나도 이해했는데말야 ^^)

Page Router

pages/
 └─ index.tsx        → /
 └─ about.tsx        → /about
 └─ posts/[id].tsx   → /posts/1

• pages 폴더 기준
• 파일 = 라우트
• 구조가 직관적이라 배우기 쉬움

App Router

app/
 └─ page.tsx         → /
 └─ about/page.tsx   → /about
 └─ posts/[id]/page.tsx → /posts/1

• 폴더 기반 라우팅
• page.tsx, layout.tsx 역할이 분리됨
• 처음엔 낯설지만 구조화가 잘 됨

 

레이아웃 처리 방식

Page Router

• 공통 레이아웃을 바깥 _app.tsx에서 직접 감싸야 함
• 페이지 이동 시 레이아웃도 다시 렌더링

App Router

app/
 └─ layout.tsx
 └─ page.tsx

• layout.tsx로 중첩 레이아웃 가능
• 페이지 이동 시 레이아웃 유지
• 대시보드, 탭 구조에 매우 유리

페이지단위로 끊어서 레이아웃을 커스텀할수있기에 이건 App Router가 압승인거같다

 

 데이터 패칭 방식

Page Router

export async function getServerSideProps() {
  return { props: {} }
}

• getServerSideProps
• getStaticProps
• getStaticPaths

요런 전용 API로 비동기처리를 해야해서 기본적으로 암기해야할것들이 좀 있는 반면

 

App Router

const data = await fetch(url, { cache: 'no-store' })

• 컴포넌트에서 직접 fetch
• 기본이 Server Component
• 캐싱 전략을 옵션으로 제어

무려 비동기처리를 컴포넌트 내에서 실행시킬수있으며 캐싱도 옵션으로 온오프가 가능하다..!!

 

Server / Client 컴포넌트 차이

Page Router

• 모든 컴포넌트가 기본적으로 Client
• SSR은 “페이지 단위”

App Router

'use client'

• 기본은 Server Component
• Client 필요할 때만 위 코드를 상단에 적어주면 끝 (대박)

 

필요할때만 클라이언트 컴포넌트를 쓸수있기때문에 JS번들 용량도 줄이고 성능도 올릴수있다.

 

마무리

 

따라서 빠르게 만들어야 하는 소규모 프로젝트는 러닝커브가 낮은 Page Router도 충분하지만..

성능이 중요한 프로젝트에선 App Router를 적극 권장한다.

앞으로는 Next도 App Router를 중심으로 지원업뎃이 될것이기때문에 이왕이면 최신스택을 고르는게 좋겠다!