1. 장점 분석: 효율적인 라우팅과 렌더링 최적화
페이지 라우터는 Next.js의 근간을 이룬 시스템으로, 개발자의 생산성과 SEO(검색 엔진 최적화) 측면에서 강력한 이점 제공.
- 파일 시스템 기반의 직관적 라우팅: 별도의 라우팅 설정 코드 없이
pages폴더 내 파일 구조만으로 URL 경로 자동 생성.[id].js와 같은 규칙을 통한 동적 경로 구현 역시 매우 간편함. - 다양한 사전 렌더링(Pre-rendering) 옵션:
- SSR (서버 사이드 렌더링): 요청 시마다 최신 데이터를 반영한 페이지 생성.
- SSG (정적 사이트 생성): 빌드 시점에 HTML을 미리 생성하여 극강의 속도 제공.
- ISR (증분 정적 재생성): 전체 빌드 없이 일정 시간마다 특정 페이지를 갱신하여 효율성 극대화.
2. 단점 분석: 관리 복잡도와 성능적 한계
프로젝트 규모가 커질수록 페이지 라우터 특유의 구조적 제약으로 인한 관리 비용 상승 우려 존재.
- 레이아웃 구성의 번거로움: 페이지별로 레이아웃 컴포넌트를 직접 감싸야 함에 따라 중복 코드 발생 및 유지보수 효율 저하.
- 데이터 페칭의 병목 및 전달 문제: 데이터 호출이 페이지 컴포넌트에 집중되어 하위로 전달하는 Prop Drilling 유발. 이를 해결하기 위해 Redux, Recoil 등 추가적인 상태 관리 도구 도입 고려 필요.
- JS 번들 비대화 및 TTI 지연: 상호작용이 없는 컴포넌트까지 모두 자바스크립트 번들에 포함되어 하이드레이션(Hydration) 시간 증가. 결과적으로 사용자가 실제 조작 가능한 시간인 TTI(Time to Interactive) 지표에 악영향 제공.
3. 사용 상황 예시
- 블로그 및 뉴스 매체: 빠른 초기 로딩과 SEO가 중요한 SSG 및 ISR 방식 활용 적합.
- 관리자 페이지: 실시간 데이터 정합성이 중요한 SSR 방식 기반의 페이지 구성 권장.
- 동적 커머스 사이트: 상품 상세 페이지 등 동적 경로가 빈번한 페이지에 파일 시스템 라우팅 적용.
4. 기본 문법 및 핵심 함수
사전 렌더링을 제어하기 위해 페이지 컴포넌트 내에서 아래 함수들을 수출(export)하여 사용.
export const getServerSideProps = async () => { ... }(SSR 구현)export const getStaticProps = async () => { ... }(SSG 구현)revalidate: 10(ISR 구현을 위해getStaticProps반환 객체에 포함)
5. 자주 하는 실수
- 모든 페이지에 SSR 적용: 서버 부하 증가 및 응답 속도 저하를 초래하므로 정적 데이터는 SSG 활용 필수.
- Link 태그의 오해:
Link는 단순 HTML 기능을 넘어 Next.js의 최적화가 적용된 컴포넌트임. 자바스크립트 실행 전에도 동작 가능함을 인지하지 못한 설계 주의 필요. - 대규모 데이터의 Props 전달: 복잡한 객체 데이터를 무분별하게 Props로 넘길 경우 렌더링 성능 저하 유발.
핵심 요약
- 파일 시스템 라우팅과 다양한 사전 렌더링(SSR, SSG, ISR)을 통한 개발 편의성 및 SEO 확보.
- 페이지 단위 레이아웃 중복 및 데이터 전달(Prop Drilling) 구조에 따른 관리 복잡성 존재.
- JS 번들 비대화로 인한 하이드레이션 비용 발생 및 TTI 성능 최적화의 구조적 한계.
출처: 한 입 크기로 잘라먹는 Next.js(v15)
