PageRouter - AppRouter 비교

최종 수정 : 2024-06-03

PageRouter

Next.js 13.4 이후 버전부터 지원하기 시작했다.

 

page router과 app router의 차이와 무엇으로 개발을 하는 것이 나은지

 

취업을 위한 목표라면, page router로 만들고 나서 app router를 경험하면서 비교하는 게 낫다. 아직은 pageRouter를 사용하는 곳이 많다. 무엇보다 둘의 차이를 알아야 한다. PageRouter를 모른 채 AppRouter를 하기는 아쉽다. 또한, AppRouter는 자리를 잡아가는 단계이다.

 

그러나 둘이 다른 점들만 있는 게 아니다. 최적화에 관해서는 동일하다.

 

 

 

 

===

 

app router 기능을 통해, FCP, TTI가 단축됐는데

---

v12 는 렌더링 방식(SSG, SSR, ISR, CSR)을 페이지 레벨에서만 선택하니까 페이지 안의 모든 컴포넌트는 하나의 렌더링 방식을 고수해야 했을 겁니다.

v13 에서 두드러진 차이는 서버 컴포넌트의 도입입니다. 서버 / 클라이언트 컴포넌트는 각각 실행 환경이 달라 하는 일도 다르게 구성하지만 더 재밌는 부분은 두개의 다른 성격의 컴포넌트가 혼재할 수 있다는 점입니다.

 

 

App Router의 가장 큰 차이는 /apges 폴더가 아닌 /app 폴더에 페이지 컴포넌트들을 추가한다는 점이다. 그리고 이 페이지 컴포넌트들은 기본적으로 리액트 서버 컴포넌트(React Server Component)이다. 기존 Pages Router에서 사용하던 리액트 컴포넌트(리액트 클라이언트 컴포넌트)와는 조금 다른 컴포넌트이다.

 

공통된 레이아웃을 적용하는 방식

메타데이터를 사용하는 방식

데이터를 받아오는 방식 등이 달라졌다.

 

 

React Server Component(RSC)란?

서버에서만 렌더링하는 컴포넌트이다. 기존에 사용하던 컴포넌트 방식은 서버 컴포넌트와 구분하기 위해서 리액트 클라이언트 컴포넌트라고 구분하기도 한다.

 

리액트 서버 컴포넌트와 리액트 클라이언트 컴포넌트의 문법에서 가장 큰 차이는 데이터를 가져오는 방식이다. 클라이언트에서 리퀘스트를 보내서 데이터를 받아오거나, Next.js에서 프리렌더링을 한다면 데이터를 Props로 내려받았다. 그런데 리액트 서버 컴포넌트를 사용하면 컴포넌트를 async/await 함수로 만들 수 있고, 함수 최상위(top-level)에서 await로 데이터를 가져올 수 있다.

 

async/await를 사용해서 컴포넌트 함수를 작성하기 때문에 훨씬 직관적인 문법으로 컴포넌트들을 개발할 수 있다. 또한 모든 데이터를 가져온 다음 렌더링까지 해서 보내주기 때문에 서버와 클라이언트가 여러 번 리퀘스트를 주고받을 때보다 빠르게 페이지를 보여줄 수 있다. 게다가 서버 컴포넌트 렌더링에 필요한 자바스크립트는 서버에서만 실행하기 때문에 클라이언트가 다운로드해야 할 자바스크립트 코드의 양도 줄어든다.

async function getData() {
 const res = await fetch('https://api.example.com/...');
 return res.json();
}

export default async function Page() {
 const data = await getData();
 
 return <main> ... </main>;
}

 

클라이언트 컴포넌트와 서버 컴포넌트를 구분할 때, 무엇을 기준으로 구분해야 하는가?

하이드레이션이 되어야 하는가에 따라 구분한다.

 

참고 글

https://young-taek.tistory.com/317

[팀미팅 질문] 서버 컴포넌트와 클라이언트 컴포넌트의 차이와 용례