Next.js 9.3버전 이후의 라이프사이클

준호·2020년 11월 22일
0

Next.js

목록 보기
2/3

getStaticProps

정적 페이지 생성을 지원하며 빌드타임때 딱 한번 실행된다.
빌드시 값은 고정되며 이후에는 변경 할 수 없다.

페이지를 렌더링 할 때만 필요한 데이터를 불러올때 사용한다.
페이지가 미리 렌더링되어야 할 떄 사용하면 좋다.

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

  if (!data) {
    return {
      notFound: true,
    }
  }
  console.log('build시에 딱 한번 실행!')

  return {
    props: { data }, // 페이지에 props로 들어가게 된다.
  }
}

// 빌드시 딱 한번만 실행된다.

function Blog({data}) { // getStaticProps에게서 data를 받았다.
  return (
  <div>
  	{data}  
  </div>
}

getStaticPaths

getStaticProps와 함께 쓰인다.
동적 라우팅을 하면서 getStaticProps를 사용하는 페이지의 빌드타임에 어떤 paths에 해당하는 페이지를 프리렌터할지 결정하기 위해 사용

해당 함수를 이용해 paths를 전달하지 않으면 params에 어떤 값이 들어올지 모르기때문에 프리렌더링 하기 위해선 필수다.

export async function getStaticPaths() {
  return {
    paths: [ // 미리 렌더링 할 경로를 정한다. 
      { params: { id: '1' } },
    	{ params: { id: '2' } }
    ],
    fallback: true or false // paths 페이지가 없을경우 처리 방법 true면 fallback페이지를 보여주고, 백그라운드로 params에 해당하는 페이지를 생성해서 사용자에게 보여준다. 
    // false면 404페이지를 보여준다.
  };
}

getServerSideProps

getStaticProps와는 달리 해당 페이지 경로를 요청이 올 때 마다 호출한다.
항상 서버 사이드에서만 호출된다.

function Page({ data }) {
  ...
}

export async function getServerSideProps({ params }) {
  const res = await fetch(`https://.../${params.id}`)const data = await res.json()

  return { props: { data } }
}

export default Page
profile
빠르게 발전중인 프론트엔드 개발자

0개의 댓글