0to1developer log
WIKIApp Router vs Pages Router

프로젝트

플레이북

도구

AI

기본기

프론트

백엔드

인프라

플레이북

App Router vs Pages Router

폴더가 곧 URL이 되는 라우팅, 그 두 세대.

Next.jsApp RouterPages RouterReact Server Components라우팅
라우팅Next.js 입문6분

한눈에

  • Next.js 라우팅 두 세대가 공존 — 둘 다 폴더 구조 = URL (파일 기반 라우팅)
  • Pages Router(~2022) = pages/ 폴더, getServerSideProps·getStaticProps. 지금은 레거시
  • App Router(2023~ 표준) = app/ 폴더, app/about/page.js → /about
  • 최대 변화 = RSC(React Server Components). 컴포넌트가 기본 서버 실행
  • 상호작용 필요한 것만 파일 맨 위 'use client'
  • 지금 새로 시작 = 무조건 App Router. Pages는 레거시 유지보수 때나

Spring에서 URL은 @RequestMapping("/about")처럼 코드로 선언한다. Next.js는 다르다. 폴더를 만들면 그게 곧 주소다. about 폴더를 두면 /about이 생긴다 — 우편함 위치가 곧 집 주소인 셈. 이걸 파일 기반 라우팅이라 부르는데, Next.js에는 이 규칙을 담은 방식이 두 세대 공존한다. 폴더=URL이라는 큰 틀은 같고, 그 안에서 데이터 가져오는 법과 컴포넌트가 도는 위치가 갈린다.

Pages Router, 구세대 (~2022)

pages/ 폴더를 쓴다. pages/about.js를 만들면 /about이 된다. 서버에서 데이터를 가져올 땐 정해진 함수를 export 해야 했다 — 요청마다 서버 렌더하려면 getServerSideProps(SSR), 빌드 때 미리 구우려면 getStaticProps(SSG). 페이지 옆에 이 함수를 붙이는 방식이다. 지금은 레거시로, 유지보수 중인 옛 프로젝트에서나 만난다.

App Router, 신세대 (2023~ 표준)

app/ 폴더를 쓴다. 경로가 되려면 폴더 안에 page.js가 있어야 한다 — app/about/page.js가 /about이다. 데이터 fetch용 특수 함수는 사라지고, **컴포넌트 안에서 바로 async/await**로 가져온다. 여기에 레이아웃 중첩, 로딩·에러 UI 같은 것도 파일 이름 규칙으로 얹는다.

layout.js — 하위 경로가 공유하는 레이아웃, 중첩 가능
loading.js — 데이터 기다리는 동안 보여줄 로딩 UI
error.js — 그 구간에서 터진 에러를 받아내는 UI
page.js — 이 폴더를 실제 URL로 만들어주는 진입점

한 장 비교

Pages RouterApp Router
폴더pages/app/
경로 예pages/about.js → /aboutapp/about/page.js → /about
데이터 fetchgetServerSideProps·getStaticProps컴포넌트 안 async/await
기본 실행 위치클라이언트(브라우저)서버(RSC)
지금 위치레거시 (유지보수)표준 (신규 프로젝트)

최대 변화, RSC(서버 컴포넌트)

App Router가 가져온 가장 큰 변화는 **RSC(React Server Components)**다. 예전 상식은 "React 컴포넌트 = 브라우저에서 도는 것"이었다. App Router에선 컴포넌트가 기본적으로 서버에서 실행된다. 그래서 컴포넌트가 DB를 직접 조회하고, 컴포넌트 몸통에서 바로 async/await를 쓴다. 클라이언트로 보내는 JS가 줄어드니 번들도 가벼워진다.

그럼 버튼 클릭·입력처럼 브라우저에서만 되는 건? 그것들만 파일 맨 위에 **'use client'**를 달아 클라이언트 컴포넌트로 떼어낸다. 즉 기본은 서버, 상호작용이 필요한 것만 클라이언트로 내려보내는 뒤집힌 그림이다. "컴포넌트는 다 브라우저 것"에서 "기본은 서버, 필요할 때만 클라이언트"로 무게 중심이 옮겨간 패러다임 전환이다.

우리 프로젝트에선

지금 읽고 있는 이 0to1 블로그가 App Router로 돈다 — app/ 폴더에 page.js를 깔고, 컴포넌트는 RSC로 서버에서 먼저 렌더된다. 그래서 이 위키 문서도 서버에서 미리 그려진 HTML로 내려온다. 밤마다 도는 자동화·빌드 파이프라인 언저리는 AI 하네스에 있다.

'use client' 경계를 어디에 긋느냐, 서버에서 그린 걸 브라우저가 어떻게 이어받느냐는 이 노트에선 "기본 서버, 필요할 때만 클라이언트"까지만 잡았다. 그 안쪽 깊이는 Server/Client Component에서 이어진다.

더 읽기

App Router로 갈아타 본 사람들의 정리·후기. 공식 문서와 함께.