Page Router 장점
1. 파일 시스템 기반 간편한 페이지 라우팅 제공
2. 다양한 방식의 사전 렌더링 제공
1.서버사이드 렌더링(SSR)
➡️ 요청이 들어올 때마다 사전 렌더링을 진행함
👍장점
요청 받을 때마다 새로운 페이지를 생성해서 최신 데이터를 보장
👎단점
생성 과정에서 만약 다른 백엔드 서버에게 데이터를 요청해야 한다면 이때 발생하는 딜레이로 인해 상황에 따라 응답속도가 크게 느려질 수 있음
2. 정적 사이트 생성(SSG)
➡️ 빌드 타임에 미리 페이지를 사전 렌더링 해둠
👍장점
페이지를 빌드 타임에 미리 Next.js 서버측에서 정적으로 생성하기 때문에 만약 이 과정에서 오랜 시간이 소요가 되더라도 모두 서버 가동이전 빌드타임에 일어나는 일이기 때문에 빌드가 완료된 이후에 발생하는 요청에는 미리 만든 페이지를 빠른 속도로 응답 할 수 있음
사전 렌더링에 많은 시간이 소요되는 페이지라도 사용자의 요청에는 매우 빠른 속도로 응답이 가능함
👎단점
빌드타임 이후에는 다시 페이지를 재생성하지 않기 때문에 매번 같은 페이지만 응답하게 되어서 최신 데이터에 대한 반영은 어려움
3. 증분 정적 재생성(ISR)
➡️ SSG 페이지를 일정 시간마다 재생성
SSG 방식으로 빌드타임에 생성된 정적 페이지에 유통기한을 예)60초 생성하여 유통기한이 지나기 전까지는 원래 만들어 두었던 페이지를 SSG방식으로 응답 해주다 유통기한이 끝나면 다시 페이지를 만들어 최신 데이터를 반영할 수 있도록 함
또는 게시글 수정과 같은 유저의 특정 행동 이후에만 페이지를 다시 생성해야 하는 상황이라면 on-Demand라는 방식으로 Next 서버에게 Revalidate요청을 보내서 페이지를 즉각적으로 생성할 수 있도록 설정할 수 있음
Page Router 단점
1. 페이지별 레이아웃 설정이 번거롭다.
➡️ 레이아웃이 적용되길 원하는 페이지마다 getLayout 메서드를 매번 새롭게 추가해야 해서 페이지별 레이아웃설정이 많아 질수록 코드의 중복도 발생하고 복잡해짐
2. 데이터 페칭이 페이지 컴포넌트에 집중된다.
➡️ 사전 렌더링 과정에서 불러온 데이터가 페이지 컴포넌트에만 전달이 되기 때문에 해당 페이지 내 여러 컴포넌트가 존재한다면 데이터를 전달하는 과정이 복잡하고 번거롭게 됨
3. 불필요한 컴포넌트들도 JS Bundle에 포함된다.
💡불필요한 컴포넌트란 상호작용이 없기 떄문에 브라우저에서 한번 더 실행되서 하이드레이션 과정을 할 필요가 없는 컴포넌트를 뜻함
Next앱에서의 렌더링은 총 두번 실행되며 첫번째는 서버측의 사전 렌더링이고 두번째는 JS Bundle에 포함되어 브라우저 측에서 하이드레이션을 위해 실행됨
🤔하이드레이션이란?
HTML로만 이뤄진 페이지에 JS코드를 연결해서 상호작용이 가능하도록 추가해주기 위한 과정
상호작용이 없는 컴포넌트를 포함하여 번들링을 하기 때문에 용량이 커질 수록 하이드레이션이 완료되는 시점이 길어지게 되고 최종적으로는 TTI 까지 걸리는 시간도 오래걸리게 됨
🤔TTI(Time to interactive)란?
하이드레이션과정이 종료되는 시점
