[Next.js] 데이터가 있거나 없는 정적 생성(SSG)

데이터가 있거나 없는 정적 생성(SSG)

정적 생성은 데이터 유무에 관계 없이 수행 할 수 있습니다.

 

지금까지 만든 모든 페이지는 외부 데이터를 가져올 필요가 없었습니다.

이러한 페이지는 앱이 프로덕션용(배포용)으로 빌드 될 때 자동으로 정적으로 생성됩니다.

 

그러나 일부 페이지의 경우 먼저 외부 데이터를 가져오지 않고는 HTML을 렌더링 하지 못할 수 있습니다.

파일 시스템에 엑세스 하거나 외부 API를 가져오거나 빌드 시 데이터베이스를 쿼리해야 할 수도 있습니다.

이런 경우 Next.js는 데이터를 사용한 정적 생성(getStaticProps)을 즉시 지원합니다.

 

데이터를 사용한 정적 생성 : getStaticProps

Next.js에서 페이지 컴포넌트를 내보낼 때  async 함수를 사용하면 getStaticProps도 내보낼 수 있습니다.

 

- getStaticProps 프로덕션이 빌드 시간에 실행 됩니다.

- 함수 내에서 외부 데이터를 가져와서 사용합니다.

export default function Home(props) { ... }

export async function getStaticProps() {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

export default function Home(props) { ... }

export const getStaticProps = async () => {
  // Get external data from the file system, API, DB, etc.
  const data = ...

  // The value of the `props` key will be
  //  passed to the `Home` component
  return {
    props: ...
  }
}

 

기본적으로 getStaticProps를 사용하면 Next.js에

"이 페이지에는 일부 데이터 종속성이 있으므로 빌드 시 이 페이지를 렌더링 할 때 먼저 해결 해야 합니다!"

라고 명시적으로 알려 줄 수 있습니다.

---

공식문서에서는 getServerSideProps(서버 측 렌더링)를 설명하지 않고 있습니다.

이는 이전 포스팅에서 확인 할 수 있습니다.

[Next.js] (3) SSR, SSG

Learn | Next.js