사전 렌더링과 데이터패칭
이제부터는 각 페이지에 필요한 다양한 형태의 데이터들을 백엔드 서버로부터 불러오려고 합니다.
백엔드 서버로부터 실제로 데이터를 불러오는 데이터 패칭 기능을 만들어 보겠습니다.
기존 React에서의 데이터 패칭
React에서는 먼저 컴포넌트 내부에 서버로부터 불러올 데이터를 저장하기 위한 state를 만들어 주었습니다.
그렇고 나서 fetchData라는 함수를 만들어사 해당 함수 안에 fetch 메서드를 사용해서 서버로부터 데이터를 불러온 데이터를 setState 메서드를 호출해서 현재 state의 값으로 업데이트를 시켰습니다.
그 다음 useEffect()를 호출해서 컴포넌트가 마운트 되었을 때 fetchData 함수를 호출하게 만듦으로서 페이지 컴포넌트가 화면에 처음 마운트 되었을 때 패칭한 다음에 state에 보관할 수 있도록 설정 했었습니다.
만약 데이터 패칭이 완료되지 않았을 때의 예외 처리를 위해서 조건문 등을 통해서 컴포넌트가 아직 로딩 중에 있었음을 표시하기도 합니다.
기존 React에서의 단점
백엔드 서버로부터 불러온 데이터가 화면에 나타나기까지 걸리는 시간이 매우 오래 걸린다는 단점입니다.
로딩이 오래걸린다는 뜻이죠
그 이유는 컴포넌트가 마운트 되는 시점에 fetchData를 호출하기 때문입니다.
하지만 Next.js에서는 이러한 걱정을 하지 않아도 됩니다.
Next.js에서의 데이터 패칭
Next.js는 사전 렌더링 방식으로 동작을 하기 때문입니다.
사전 렌더링이란?
브라우저가 초기 접속 요청을 보냈을 때 Next.js 서버 측에서 해당 페이지에 필요한 자바스크립트 코드들을 모두 실행을 시켜서 만든 리액트 컴퍼넌트들을 HTML로 렌더링을 마친 다음에 렌더링이 완료된 HTML 파일을 브라우저에 응답하는 방식
그렇기에 React 보다 훨씬 더 빠른 타이밍에 백엔드 서버로부터 데이터를 요청하고 불러올 수 있습니다.
그렇기에 사용자에게 데이터 패칭이 이미 완료된 페이지를 추가적인 로딩 없이 바로 부여줄 수 있다는 장점을 가지고 있습니다.
만약 사전렌더링이 오래 걸릴거 같다고 예상이 되는 경우에는 빌드 타임에 사전 렌더링을 하도록 하는 다양한 방식으로 여러가지를 제공하고 있습니다.
Next.js의 다양한 렌더링 방식
- 서버 사이드 렌더링(SSR)
- 가징 기본적인 사전 렌더링 방식
- 요청이 들어올 때 마다 사전 렌더링을 진행 함
- 정적 사이트 생성 (SSG)
- 사전 렌더링을 미리 완료하는 렌더링 방식
- 빌드 타임에 미리 페이지를 사전 렌더링 해 둠
- 증분 정적 재생성 (ISR)
