[NextJS] Data Fetching: getServerSideProps

NextJS는 프리렌더링(pre-rendering)기능을 제공한다. 사전에 미리 html을 렌더링하는 것이다. 즉, HTML을 미리 생성하고 최소한의 js를 연결시킨 후 클라이언트에서 요청이 들어오면 해당 HTML을 로드하면서 나머지 js를 불러와 화면에 렌더링 시켜주는 것이다. 쉽게말해 데이터가 유효할때 화면이 보여지게되는 게 좋은지, 또는 로딩화면을 보여준 다음 데이터를 받는게 좋은지 선택할수있다는 것이다.

NextJS는 주로 두가지 프리렌더링 기능을 제공한다.
1) SSR (Sever-Side Rendering)
2) SSG (Static Site Rendering)
이 포스팅에서는 첫번째방법 SSR getServerSideProps 방식에 대해 알아보겠다.

💻 getServerSideProps

SSR페이지에서 getServerSideProps라는 함수를 내보내면 NextJS는 반환된 데이터를 사용하여 각 요청에서 이 페이지를 미리 렌더링한다. 즉, 요청할때마다 HTML이 생성되기 때문에 데이터를 계속 불러와 업데이트되고 업데이트된 데이터로 페이지가 렌더링된다.

🖤 예시

<script>
function Page({ data }) {
  // Render data...
}
 
// This gets called on every request
export async function getServerSideProps() {
  // Fetch data from external API
  const res = await fetch(`https://.../data`)
  const data = await res.json()
 
  // Pass data to the page via props
  return { props: { data } }
}
 
export default Page
</script>

❗ getServerSideProps라는 함수 이름으로 export할 경우, Next.js에 의해 자동적으로 SSR을 실행한다. 요청에 의해 생긴 데이터는 서버사이드에서 동작하며 브라우저에서는 동작하지 않는다.

🖤 언제 사용할지

getServerSideProps는 계속 데이터가 바뀌어야하는 페이지의 경우 사용한다. 요청의 데이터 또는 속성의 특성때문일수있다. 사용하는 페이지는 getServerSideProps요청시 서버측에서 렌더링되며 캐시 제어 헤더가 구성된 경우에만 캐시된다. 요청 중에 데이터를 렌더링할 필요가 없다면 클라이언트 측에서 데이터를 가져오는 것을 고려해야한다.

🖤 오류페이지 렌더링 유무

내부에서 오류가 발생하면 파일이 getServerSideProps표시된다.

참고문헌
공식문헌NextJS
nextJS데이터가져오기/티스토리
SSR, getServerSideProps 적용하기/티스토리