SSG : Static Site Generation

정적 페이지 생성(Static Site Generation) 방식 입니다.

항상 서버에서 실행되며 빌드 단계에서 데이터를 가져오고 JSON으로 저장하여 고정적으로 사용합니다.

getStaticProps 는 최초 빌드시 한 번만 호출이 되어 집니다. 즉 최초 빌드후에 데이터 값이 추후 변경이 될 일

없는 경우에 사용하는것이 좋습니다.

언제 사용 하나요?

빌드 후에도 고정되어질 내용에 적합합니다.

ex. 블로그글, 쇼핑몰의 상품페이지 등의 내용이 고정적이며 SEO가 중요한 페이지들이 해당됩니다.

const DUMMY_DATA = [
  {
    id: 1,
    title: "first data",
  },
  {
    id: 2,
    title: "second data",
  },
];

const Sample = (props) => {
  return (
    <>
      {props.data.map((data) => (
        <div key={data.id}>{data.title}</div>
      ))}
    </>
  );
};

export async function getStaticProps() {
  return {
    props: {
      data: DUMMY_DATA,
    },
		revalidate: 10,
  };
}

export default Sample;

위와같은 형태로 정적 getStaticProps를 사용할수 있습니다.

revalidate는 요청이 들어올때마다 주기적 업데이트가 가능한 옵션 입니다. 위의 코드에서는 10초마다

업데이트를 한다는 의미를 갖습니다.