Section 3. Page Router 핵심 정리(끝)

인프런 "한 입 크기로 잘라먹는 Next.js" 수강\

1. 기본 특징

• Page Router는 파일 시스템 기반 라우팅을 제공하여 pages 폴더 안에 파일을 생성하면 자동으로 라우팅됨.
  • 예: pages/index.tsx → /
  • pages/search.tsx → /search
  • pages/book/[id].tsx → /book/:id
• 장점
  • 별도의 라우팅 코드가 거의 필요 없음.
  • 폴더 구조만으로 라우팅을 자유롭게 설정 가능.
  • URL 파라미터와 다이나믹 라우팅(.id)도 쉽게 지원.

---

2. 사전 렌더링 방식

Page Router는 두 가지 사전 렌더링 방식을 제공:

1. SSR (Server-Side Rendering)
   • 매 요청마다 서버에서 HTML을 새로 생성.
   • 항상 최신 데이터를 보장하지만 응답 속도가 느려질 수 있음.
2. SSG (Static Site Generation)
   • 빌드 시점에 HTML을 미리 생성.
   • 빠른 응답 가능, 그러나 최신 데이터 반영 어려움.
3. ISR (Incremental Static Regeneration)
   • SSG 페이지를 일정 시간마다 갱신하거나 on-demand로 재생성 가능.
   • 최신성과 속도를 동시에 어느 정도 만족시킴.

---

3. 단점

• 레이아웃 설정의 불편함
  • 페이지별 레이아웃을 설정하려면 getLayout 같은 패턴을 직접 구현해야 함.
  • 코드 중복과 복잡성이 생기기 쉬움.
• 데이터 패칭 제약
  • getServerSideProps, getStaticProps 등 특수 함수 사용 필요.
  • 데이터 전달 구조가 props 기반이라 중첩 컴포넌트까지 데이터 전달 시 복잡해짐.
• 불필요한 컴포넌트 렌더링 문제(= 불필요한 컴포넌트들도 JS Bundle에 포함된다)
  • 서버 사이드 렌더링 시 모든 컴포넌트가 한 번에 실행.
  • 상호작용(인터랙션)이 필요 없는 단순 렌더링 컴포넌트도 불필요하게 포함되어 성능 저하 유발.
  • 이로 인해 hydration 단계에서 브라우저에서 한 번 더 실행되어 비효율적.

---

4. 정리

• Page Router는 간단하고 직관적인 파일 기반 라우팅을 제공하며, SSR, SSG, ISR 세 가지 렌더링 방식을 지원하여 다양한 케이스에 대응 가능.
  
• 그러나 레이아웃 관리, 데이터 전달 구조의 한계, 불필요한 렌더링 등의 단점이 존재.
• 이 한계들을 보완하기 위해 App Router가 새롭게 등장.