Next.js - Data Fetching ( getServerSideProps )

getServerSideProps

< When does getServerSideProps run >

getServerSideProps는 오직 server-side에서만 동작하며 browser에서는 동작하지 않습니다.

만약 페이지가 getServerSideProps를 사용하게 된다면

- 페이지에 직접 들어갔을 때, 페이지는 return된 props에 의해 pre-rendering된다.

- 만약 'next/link'나 'next/router'와 같은 client-side page를 통해 들어가게 되었다면 Next server에 API요청을 보내서 실행한다 ( pre-rendering 진행)

여기서 중요한 것은 getServerSideProps는 'JSON'데이터를 반환하는데 이는 pre-rendering하는데 사용된다. 또한 이는 Next.js에 의해 handling되기 때문에 블랙박스 영역이다.

 

< When should I use getServerSideProps  >

우리는 getServerSideProps를 request time에 data를 fetch해서 pre-rendering할 때 써야 한다. 이는 Time to First Byte (TTFB)가 getStaticProps보다 높게 된다. 왜냐하면 서버가 request에 대한 result를 매번 계산해야 하기 때문이다. 그래서 결과가 'cache-control' header 에 의해 cdn에 캐시될 수 있다.

 

< Fetching data on the clinet side >

만약 우리가 pre-render가 필요가 없는 사이트라면 client-side에서 fetching하는 것도 고려해 볼 수 있다.

- 첫번쨰로 데이터 없이 페이지에 보여지고(Static Generation에 의해 보여지게 할 순 있지만) 

- 그후로는 client side에서 fetch한다.

이는 user-dashboard에서 활용된다. 그 이유는 dashboard는 private하고 SEO가 필요가 없으며 페이지가 pre-render될 필요가 없기 때문이다. 

 

< Does getServerSideProps render an error page >

만약 getServerSideProps에서 오류가 났다면 'pages/500.js'을 렌더링 해준다.

 

getServerIsdeProps API 

기본적인 형태는 아래와 같다.

export async function getServerSideProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

< Context parameter >

'conetxt' parameter는 객체며 아래와 같은 key를 가진다

• 'params':  dynamic route를 사용할 때 적용된다 만약 페이지 이름이 [id].js라면 'params'는 '{.id: ...  }'와 같을 것이다.
• 'req': 들어오는 'HTTP' 요청 object이다.
• 'res': 들어오는 'HTTP' 응답 object이다.
• 'query': page의 query string을 나타낸다.
• ... 이하는 생략 필요할 떄 작성하겠다.

< grtServerSideProps return values >

'props': key-value쌍으로써, 해당 page-component에 전달되어 진다. 

'notFound': '404'가 났을 떄 '404'페이지를 띄워줄것인가에 대한 것이다.