<Next.js> Data Fetching

기존 React 데이터 페칭의 문제점

1. 처음에 텅 빈 HTML을 반환
2. 서버에서 데이터를 받아오느라 지연시간이 있음.

Next.js가 페이지를 준비하고 사전 렌더링하는 방식

Next.js는 사전 렌더링이라는 개념을 이용하여 기존 React 데이터 페칭의 문제점을 해결합니다.

getStaticProps란

getStaticProps를 통해 정적 페이지 생성을 가능하게 합니다.
이 방법은 일반적으로 권장되는 방법입니다.

정적 생성 ➡️ 빌드하는 동안 페이지를 사전 생성하는 것

사전 생성 ➡️ 콘텐츠를 구성하는 모든 HTML 코드와 모든 데이터를 사전에 준비시켜 놓음을 의미

이 때 문제는 어떤 페이지를 사전에 생성해야하는지 지정하는 것이다.
사전 생성할 페이지에 어떤 데이터가 포함되어야 하는지 어떻게 지정할까?

page폴더의 컴포넌트에 특수한 비동기 함수인 getStaticProps()를 사용하여 데이터를 사전에 가져온다.

export async function getStaticProps(context) {
	// code...
}

해당 함수로 보통 서버 사이드에서만 실행되는 모든 코드를 실행할 수 있음.

즉, 클라이언트 사이드 코드로만 제한되는 것이 아니라 특정 클라이언트 사이드 API에 엑세스가 없거나, 윈도우 객체에 대한 액세스가 없는 일반적인 서버 사이드에서만 가능한 모든 코드도 실행할 수 있게 된다.

그리고 해당 코드는 클라이언트에게 재전송되는 코드에 포함되지 않는다.

getStaticProps() 함수는 주로 페이지의 초기 데이터를 미리 가져오는 데 사용되며, 이 함수 내에서 클라이언트 사이드 렌더링과 관련된 작업은 수행하지 않는 것이 좋다.

Next.js는 동적 데이터가 없는 모든 페이지를 사전 렌더링합니다.
이러한 특징은 컴포넌트에 부호화하는 모든 콘텐츠를 검색 엔진이 인식하고, 사용자가 웹사이트를 처음부터 볼 수 있다는 점이 장점이다.

getStaticProps 함수는 모든 페이지 파일에 추가할 수 있고, page에만 추가할 수 있으며 반드시 export 해야 합니다.
이렇게 함으로써 Next.js가 페이지를 사전 생성할 때 사용자를 대신하여 해당 함수를 호출합니다.

getStaticProps 함수는 이 페이지가 사전 생성되어야 하는 페이지임을 Next.js에 알려줍니다.

Next.js는 기본값으로 모든 페이지를 사전 렌더링하지만, 이후에 Next.js가 페이지를 사전에 렌더링하지 않게 하는 방법을 배웁니다.