[NEXT] getServerSideProps로 데이터 fetch

page에서 서버 측 랜더링 함수은 getServerSiderProps함수(이름 중요!)를 export하는 겨웅

Next.js는 getServerSideProps에서 반환된 데이터를 사용하여 각 request에서 이 페이지를 pre-rendering함

getSerSideProps는 서브 측에서만 실행되며 브라우저에서는 실행x

 

getServerSideProps를 사용하여 request시 데이터 fetch하기

export default function Home({data}) {
  //데이터 렌더링
}

//매 request마다 실행
export async function getServerSideProps() {
  const data = await ( await fetch(`https://.../data`)).json();
  return {
    props: {
      data, //props를 통해 page에 data전달
    }
  }
}

fetch할 때 오류가 뜰 경우 https를 http로 바꿔보자

 

타입스크립트를 사용할 경우 아래 링크 참조

https://nextjs.org/docs/api-reference/data-fetching/get-server-side-props#getserversideprops-with-typescript

Data Fetching: getServerSideProps | Next.js