[Docs] 정적 생성(Static Generation)

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

외부 데이터를 페치 할 필요가 없는 경우, 앱은 빌드 시점에 아래 그림처럼 자동으로 정적 생성될 것이다.

 

 

하지만 외부 데이터를 먼저 페치 하지 않으면 HTML을 렌더링 할 수 없는 경우도 있다.

빌드 시점에 파일 시스템에 액세스하거나, 외부 API를 페치 하거나, 혹은 데이터베이스를 쿼리해야 하는 경우다.

이런 경우에는 어떻게 해야할까?

 

 

 

getStaticProps를 사용하여 정적 생성하기

 

페이지 컴포넌트를 익스포트 할 때 getStaticProps라는 비동기 함수를 함께 익스포트해주면 된다.

그러면 프로덕션 빌드 시점에 이것이 실행되고 내부에서 외부 데이터를 페치 하여 페이지에 props로 보낸다.

 

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: ...
  }
}

 

본 메서드를 사용하는 것은 다음과 같은 의미를 지닌다.

• 이 페이지에는 몇 가지 데이터 종속성이 있다.
• 빌드 시 이 페이지를 프리렌더링하기에 앞서 종속성을 먼저 해결하겠다.