Next.js

Next.js란 React.js 전용의 웹 개발 프레임워크이다. 사전 렌더링, 최적화, 파일 기반 라우팅 시스템을 가지고 있다.

사전 렌더링
브라우저의 요청에 사전에 렌더링이 완료된 HTML을 응답하는 렌더링 방식이다.

렌더링 흐름도

유저가 서버에게 요청을 보내면 사전에 렌더링이 완료된 HTML을 주어 화면에 렌더링을 한다. 그 페이지는 아직 상호작용이 안 되는 상태이다. JS 코드가 실행될 수 있도록 수화 (하이드레이션) 과정을 거쳐야 상호작용이 가능하다.

Page Router 장단점

장점

1. 파일 시스템 기반 라우팅
2. 다양한 방식의 라우팅 방식 (SSR, SSG, ISR)

단점

1. 페이지별 레이아웃 설정이 번거롭다.
2. 데이터 페칭이 페이지 컴포넌트에 집중이 된다.
3. 불필요한 컴포넌트들도 JS 번들에 포함이 되어 번들 사이즈가 커진다.

이런 단점들을 보완하기 위해 Next.js의 App Router가 등장하게 된다.