NEXTJS 개발 공부를 좀 제대로 해보고 싶어 강의를 하나 구매했다..!!
천천히 강의를 보며 공부하며 새로 알고 이해한 내용들을 정리해 볼까 한다.
오늘은 getStaticProps에 대해 이해하고 배운 점을 정리할 것이다!!

getStaticProps

getStaticProps를 왜 사용하는지?

• static page를 개발할때 매번 data feching 하지 않고 빌드 타임 시 정적인 프리 렌더링 된 HTML 만들어서 그대로 가져오는 것이기 만들어 짧은 시간으로 html 파일을 가져올 수 있다.

getStaticProps는 개발환경에서는 요청마다 새로 호출?

• getStaticProps는 빌드 타임 시 프리 렌더링 된 HTML 파일을 만드는데 개발 환경에서는 따로 빌드를 하지 않아 요청마다 새로 호출된다. 그래서 아래 예시에서 data에 값이 계속 변경됨을 알 수 있다.

getStaticProps 함수에서 return 하는 props 값과 위에 있는 Example 함수가 어떻게 연결이 되는지?

• 공식문서를 보면 export 하면 그 props를 이용해 해당 'page'를 pre-render 한다고 적혀있다.
  https://nextjs.org/docs/basic-features/data-fetching/get-static-props

revalidate

• Revalidate는 ISR( Incremental Static Regeneration )
  ISR 방식은 일정 주기마다 데이터의 최신 여부를 검사하고 업데이트된 데이터로 페이지를 다시 생성한다. 해당 페이지만 업데이트하는 것이기 때문에 전체 사이드를 다시 빌드 하지 않는다. 해당 기능으로 이미 빌드가 완료된 사이트에서 주기적으로 정적인 페이지를 업데이트가 가능하다. ( 데이터가 변하지 않으면 Next가 프리 렌더링을 다시 수행하지 않는다. )

import { NextPage } from 'next';

interface Props {
  data: number;
}

const Example: NextPage<Props> = ({ data }) => {
  return (
    <>
      <h1>getStaticProps Page</h1>
      <h2>값 : {data}</h2>
    </>
  );
};
export default Example;

export async function getStaticProps() {

  const delayInSeconds = 2;
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve(Math.random()), delayInSeconds * 1000);
  });
  
  return {
    props: { data },
    revalidate: 5,
   };
}