개발공부/Next.js

getServerSideProps()

soOoOnger 2022. 11. 9. 21:01

지정된 이름이며 NextJS가 찾는다. 

getStaticProps 와 차이점이라면 

이 함수는 빌드 프로세스 중에는 실행되지 않는다는 것이다.

하지만 배열 다음에 서버에서 실행된다.

export async function getServerSideProps(){

//fetch data from an API
  return{
    props:
  }
}
이 객체는 리턴한다. 프랍 프로퍼티로 
 
왜냐하면 이 함수는 여전히 페이제 컴포넌트에 프랍을 받기 때문이다.
 
그리고 여전히 api에서 데이터를 패치한다.
 
여기에는 revalidate를 쓸 수 없다. 요청이 들어 올 때마다 실행되기 때문이다.
 

 

그래서 시간을 지정할 필요가 없다.
 
여기서 할일은 context 매개변수로 한다.
 
콘텍스트 변수에서 요청 객체에 접속할 수 있다.
 
그리고 응답 객체가 들어온다. 
 
export async function getServerSideProps(context){
 const req= context.req; 

  const res = context.res;
//fetch data from an API
  return{
    props:
  }
}

getServerSideProps() 은 페이지가 요청이 들어올 때마다 프리 제너레이트 된다.

 

getServerSideProps() 와 getStaticProps()중에 getStaticProps 이 좀 더 좋다.

 여기서는 html 파일을 프리 제너레이트 하기 때문이다.

그 파일은 CDN에 저장되고 서브 된다.

그리고 요청이 들어올 때마다 데이터를 다시 만들고 패치하는 것보다 빠르다.

따라서  getStaticProps 페이지일 때가 더 빠르다 캐시하고 사용하기 때문이다.

 

콘크리트 요청 객체에 접속해야 한다면 getServerSideProps를 사용해야한다.

getStaticProps에서는 요청과 응답에 접속하지 않기 때문이다.

매초 여러번 바뀌는 데이터를 가지고 있다면 revalidate는 도움이 안된다.

그때 getServerSideProps 선택하는게 좋다.