[Next.js 챌린지] 페이지 라우터 정리

페이지 라우터

장점

1. 폴더 구조만으로도 간편한 페이지 라우팅 제공

동적 경로

2. 다양한 방식의 사전 렌더링 제공

1. 서버사이드 렌더링 (SSR)
   요청이 들어올 때 마다 사전 렌더링을 진행
   → 최신 데이터 반영 보장
   → 상황에 따라 응답 속도가 느려질 수 있음

2. 정적 사이트 생성 (SSG)
   빌드타임에 미리 페이지를 렌더링
   → 사전 렌더링에 많은 시간이 소요되더라도 사용자의 요청에는 매우 빠른 속도로 응답 가능
   → 빌드타임 이후에는 페이지를 재생성 하지 못해 똑같은 페이지만 응답
   → 최신 데이터 반영이 어려움

3. 증분 정적 재생성 (ISR)
   SSG 페이지를 일정 시간마다 재생성
   → 빌드타임에 미리 생성된 정적 페이지에 유통기한을 설정하여,
       유통기한이 지나기 전까지는 원래 만든 페이지를 SSG 방식처럼 응답
   → 유통기한이 끝나면 새로운 페이지를 반환하여 최신 데이터 반영 가능

단점

1. 페이지별 레이아웃 설정이 번거롭다

2. 데이터 페칭이 페이지 컴포넌트에 집중된다

3. 불필요한 컴포넌트들도 JS Bundle에 포함된다
   → 상호작용이 없는 컴포넌트까지 JS Bundle에 포함되어 브라우저 측에서 한 번 더 실행된다
   → JS Bundle의 용량이 커지고 TTI까지의 시간이 증가한다