[Next.js/Page Router] 5. Page Router 마무리

✅ Page Router의 장점

1) 파일 시스템 기반의 간편한 페이지 라우팅 제공

• Next.js에서는 pages/ 폴더 안에 파일을 생성하는 것만으로 자동으로 라우팅이 설정됨
• 별도의 라우팅 설정 없이 파일 기반으로 쉽게 관리 가능

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

서버 사이드 렌더링 (SSR)

• 요청이 들어올 때마다 서버에서 HTML을 생성하여 클라이언트에 전달
• 동적인 데이터를 렌더링하는 데 적합

정적 사이트 생성 (SSG)

• 빌드 타임에 미리 HTML을 생성하여 정적 페이지로 제공
• 성능이 뛰어나며 SEO에 유리함

증분 정적 재생성 (ISR)

• SSG 방식에서 일정 시간이 지나면 새로운 페이지를 생성하여 최신 데이터 반영
• 실시간 데이터 갱신이 필요한 경우 활용 가능

 

❌ Page Router의 단점

1) 페이지별 레이아웃 설정이 번거로움

• 모든 페이지에서 개별적으로 레이아웃을 설정해야 함
• App Router(app/ 디렉토리)를 사용하면 더 쉽게 해결 가능

2) 데이터 페칭이 페이지 컴포넌트에 집중됨

• getServerSideProps, getStaticProps 등을 사용해야 하며, 페이지 컴포넌트에 데이터 로딩 로직이 집중됨

3) 불필요한 컴포넌트들이 JS 번들에 포함됨

• 서버에서 한 번 렌더링하고, 브라우저에서 다시 하이드레이션하는 과정에서 컴포넌트가 두 번 실행됨
• 필요 없는 코드까지 포함되면서 번들 크기가 증가할 수 있음

 

🎯 배운점

✔ Page Router는 파일 기반 라우팅과 다양한 사전 렌더링 방식을 제공하여 사용이 간편하지만, 데이터 페칭 집중 및 번들 크기 증가 등의 단점이 있음.

✔ 이러한 단점을 해결하기 위해 App Router를 도입하면 더욱 효율적인 구조를 만들 수 있음.

✔ SSR, SSG, ISR의 특성을 이해하고 프로젝트에 적합한 렌더링 방식을 선택하는 것이 중요함.