[Next.js] page router 사전 렌더링과 데이터페칭

한 입 크기로 잘라먹는 Next.js 학습정리용입니다. 
2.10) 사전 렌더링과 데이터페칭

React app 에서의 데이터 페칭

리액트 앱은 CSR로 브라우저가 렌더링을 직접 처리하는 방식으로 동작했다.

따라서 FCP 시점으로 오기까지도 오래 걸린다.

 

리액트 앱에서 데이터 페칭은 컴포넌트가 마운트된 이후에 진행되기 때문에 FCP 이후에 추가적인 시간이 소요된다.

즉, 데이터 요청 시점이 느려지게 되는 단점 발생

 

Next.js의 다양한 사전 렌더링

1. 서버사이드 렌더링(SSR)

사전 렌더링의 과정 중에 데이터 패칭을 동시에 수행할 수 있다.

따라서 데이터를 요청하는 시점이 매우 앞서기 때문에 사용자에게 데이터 패칭이 이미 완료된 웹페이지를 추가적인 로딩 없이 보여줄 수 있다.

이는 가장 기본적인 사전 렌더링 방식이고, 요청이 들어올 때마다 사전 렌더링을 진행한다.

 

2. 정적 사이트 생성(SSG)

사용할 수 있는 상황

- 불어와야 하는 데이터의 용량이 너무 크거나 백엔드 서버의 상태가 좋지 않는 등 데이터 페칭이 오래걸리는 경우,
   사용자는 로딩페이지같은 화면 조차도 못보는 상황이 생김.

 

빌트 타임에 미리 사전 렌더링을 그때 할 수 있도록 설정할 수 있음.

 

3. 증분 정적 재생성(ISR)

향후에 다룰 사전 렌더링 방식