1. getStaticProps

getStaticProps는 정적 사이트 생성(SSG, Static Site Generation) 및 점진적 정적 생성(ISR, Incremental Static Regeneration)을 위해 사용되는 메소드로 빌드 타임에 pre-rendering을 위해 호출된다.

SSG와 ISR을 나누는 기준은 return 객체의 revalidate 옵션이며 revalidate 없다면 SSG로 동작하여 빌드 시 딱 한번만 호출된다는 특징이 있다. 단, 데이터 업데이트를 위해서는 재빌드 및 배포가 필요하다는 단점이 있다.

revalidate가 존재하면 ISR로 동작하며 revalidate의 value 값에 따라 특정 주기마다 페이지를 재생성한다.

const component = (props) => {
  ...
};

export default component;

export const getStaticProps = async () => {
  ... // API 호출 혹은 파일 시스템 접근 등의 코드 작성
	
  return {
    props: {
      key: value, // 페이지 컴포넌트에 넘겨줄 props
    },
    revalidate: 10,  // 점진적 정적 생성(ISR, Incremental Static Regeneration) 구현 시 사용
  };
};

2. getStaticPath

getStaticPaths는 getStaticProps와 마찬가지로 pre-rendering 위해 사용하는 메소드이다. getStaticProps와의 차이점은 pages/**/[id].tsx과 같이 동적 라우팅 페이지 중 빌드 시 정적으로 생성할 페이지를 결정할 수 있다.

const component = (props) => {
  ...
};

export default component;

export const getStaticPath = async () => {
  ... // API 호출 혹은 파일 시스템 접근 등의 코드 작성
	
  return {
		paths: [
      { params: {} } // 빌드 시 생성할 동적 페이지의 params
    ]
    fallback: true | false | 'blocking' // 필수 값
  };
};

2-1. getStaticPath의 fallback 옵션

2-1-1. false

getStaticPaths가 반환한 path들 pre-rendering하며 getStaticPaths가 반환하지 않은 모든 path에 대해서 404 페이지를 반환한다.

• 사용 시기
  • 적은 숫자의 path만 프리렌더링 해야하는 경우 사용
  • 새로운 페이지가 추가 될 일이 많지 않은 경우 사용, 새로운 페이지가 자주 추가 된다면 추가될때마다 다시 재빌드 해야한다.

2-1-2. true

getStaticPaths가 반환한 path들 pre-rendering하며 getStaticPaths가 반환하지 않은 path를 요청하는 경우 fallback 버전을 먼저 사용자에게 보여주고 백그라운드에서 getStaticProps 함수를 사용하여 static하게 페이지를 생성한 뒤 해당 페이지를 사용자에게 보여준다. 그 후 생성된 페이지에 대해서는 getStaticPaths에 path로 추가한다.