getServerSideProps

매번 페이지 요청 때마다, pre-render하고 싶을 때 사용한다. 그리고, component를 render하기 전에 필요한 값들을 component에 props로 전달한다.

 

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

context 속성

params: 해당 페이지의 route parameter를 보유하고 있다.

만약 page 이름이 [id].js이면, params는 {id: ...}라고 나타날 것이다.

 

getServerSideProps 반환값

1. props: page 컴포넌트에서 받는 props들을 나타낸다.

2. notFound: 조건에 따라 404페이지를 보이고 싶을 때 사용한다.

3. redirect: 필요시, redirect할 때 사용한다. destination과 permanent를 키값을 갖는다.

예시

export async function getServerSideProps(context) {
  const res = await fetch(`https://...`)
  const data = await res.json()

  if (!data) {
    return {
      notFound: true,
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}

export async function getServerSideProps(context) {
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  if (!data) {
    return {
      redirect: {
        destination: '/',
        permanent: false,
      },
    }
  }

  return {
    props: {}, // will be passed to the page component as props
  }
}