정적 페이지에 대한 데이터 가져오기

사전 렌더링 기능, 이 내장된 프로세스에는 단점이라고 하자면 

사전렌더링한 페이지는 컴포넌트가 첫 번째 렌더링 사이클을 마친 이후의 스냅샷을 콘텐츠로 갖고 있다 .

중요한 데이터가 손실된 상태이다. 

 

NextJS에서 이러한 부분을 방지하기 위해 설정을 해야한다 

이를 위해  NextJS페이지 렌더링 방법을 제어하는 데 사용할 수 있는 두가지 형태의 사전 렌더링을 제공한다.

정적 생성, 서버 사이드 렌더링이 있다.

서로 다른 시점에서 코드가 실행한다.

 

정적생성 : 일반적으로 사용하는 접근법이다.

프로덕션용으로 빌드하는 시점에 렌더링을 한다. 

기본적으로 요청이 서버에 도달했을 때 서버에서 즉각적으로 페이지를 

사전 렌더링하지 않는다.

대신에 개발자가 프로덕션용 사이트를 빌드할 때 사전 렌더링을 한다.

즉 사이트가 배포되고 나면 사전 렌더링한 페이지는 변경되지 않는다. 

export function getStaticProps()

이 함수를 쓰면 컴포넌트 함수를 바로 호출하지 않고 변환된 jsx 스냅샷을 html 콘텐츠로 사용한다.

export async

여기에서 promise 반환 할 수 있다.

 NextJS는 이 promise가 해결될 때까지 기다린다.

다시 말하면 데이터를 읽어 들일 때까지 기다린다.

function getStaticProps(){

api , 데이터 읽기 등등 할 수있다. 다하면 

return{

props:

일반적으로 여기에 props 프로퍼티를 설정한다는 것이다.

이름은 반드시 props

이 페이지 컴포넌트에서 사용할  Props로 설정된다.

따라서 이 페이지 컴포넌트는 

상태 관리할 필요가 없고 useeffect 도 필요하지 않는다.

데이터를 props에서 받기 때문이다

};여기에서 객체를 반환해야 한다.

}

여기에서 작성된 코드는 클라이언트 측에서 절대 실해되지 않는다.

이 코드는 빌드 프로새스 중에 실행되기 때문이다.

절대 방문자 컴퓨터에 실행 될 수가 없다.

 

클라이언트에서 서버 쪽으로 빌드 , 프로세스 과정 쪽으로 데이터를 가져올 수 있다. 

이렇게 하면 전체 html 코드도 포함하고 있고 검색엔진에도 좋다.

클라이언트 측 컴포넌트의 두번째 렌더링 사이클에서 데이터를 받는 것이 아니라

초기에 이 페이지를 사전 렌더링하기 전에 

빌드 프로세스에서 받기 때문이다.

이 사전 렌더링으로 데이터 가져오기는 굉장한 장점이자 NextJS 주요 기능 중 하나이다.