Muscardinus

getStaticProps 본문

FrontEnd/NextJS

getStaticProps

Muscardinus 2021. 9. 27. 01:03
728x90

When to use getStaticProps

  • The data required to render the page is available at build time ahead of a user’s request.
  • The data comes from a headless CMS.
  • The data can be publicly cached (not user-specific).
  • The page must be pre-rendered (for SEO) and be very fast — getStaticProps generates HTML and JSON files, both of which can be cached by a CDN for performance.
export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props,
    revalidate: true
  }
}

 

context 속성

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

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

 

getStaticProps 반환값

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

2. revalidate: 일정 시간이 지나면, page를 re-generate한다. 만약, false일 경우 re-generate가 없다.

3. notFound: 조건에 따라 404페이지가 나타나게 한다.

예시

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

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

  return {
    props: { data }, // will be passed to the page component as props
  }
}
주의) notFound는 getStateicPaths에서 fallback:false 일 경우, 불필요하다.

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

예시

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

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

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

'FrontEnd > NextJS' 카테고리의 다른 글

Head  (0) 2021.09.27
getServerSideProps  (0) 2021.09.27
getStaticPaths  (0) 2021.09.27
Comments