[공식문서] NextJS - Pre-rendering and Data Fetching #5

데이터를 사용하거나 사용하지 않고 정적 생성

정적 생성은 데이터를 사용하거나 사용하지 않고 수행할 수 있습니다.

 

지금까지 만든 모든 페이지는 외부 데이터 검색이 필요하지 않습니다. 이러한 페이지는 프로덕션용으로 앱이 빌드될 때 자동으로 정적으로 생성됩니다.

Next.js 공식문서 - 데이터 없이 정적 생성

그러나 일부 페이지의 경우 외부 데이터를 가져와 HTML을 렌더링하지 않으면 안될 수 있습니다. 파일 시스템에 엑세스하거나 외부 API를 가져오거나 빌드 시간에 데이터베이스를 쿼리해야 할 수 있습니다. Next.js는 이러한 경우를 지원하며, 이를 통해 데이터를 사용한 정적 생성을 쉽게 할 수 있습니다.

Next.js 공식문서 - 데이터를 사용하여 정적 생성

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

어떻게 작동할까요? Next.js에서 페이지 컴포넌트를 내보낼 때 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: ...
  }
}

본질적으로 getStaticProps를 사용하면 Next.js에게 "이 페이지에는 일부 데이터 종속성이 있으므로 빌드 시간에 이 페이지를  사전 렌더링할 때 반드시 이 종속성을 먼저 해결해주세요!"라고 알릴 수 있습니다.

 

참고 : 개발 모드에서는 getStaticProps가 각 요청마다 실행됩니다.

 

getStaticProps 사용해보기

실제로 해보면 더 쉽게 이해할 수 있습니다.

다음 페이지부터 블로그를 구현하는데 getStaticProps를 사용해 보겠습니다.2