Data Fetching > getStaticProps [공식 문서로 공부하는 Next.js]

getStaticProps 

Basic Features > Data Fetching > getStaticProps

 

페이지에서 getStaticProps(정적 사이트 생성)라는 함수를 내보내는 경우 Next.js는 getStaticProps에서 반환된 props를 사용하여 빌드 시 이 페이지를 미리 렌더링합니다.

 

export async function getStaticProps(context) {
  return {
    props: {}, // will be passed to the page component as props
  }
}

 

언제 getStaticProps를 사용하나요?

1. 페이지를 렌더링하는 데 필요한 데이터는 사용자의 요청에 앞서 빌드 시 사용할 때
2. 데이터를 헤드리스 CMS에서 가져올 때
3. 데이터를 공개적으로 캐시할 때(사용자별 아님)
4. 페이지는 (SEO의 경우) 사전 렌더링되어야 하며 매우 빨라야 할 때 - getStaticProps는 성능을 위해 CDN에서 캐시할 수 있는 HTML 및 JSON 파일을 생성합니다.

 

Incremental Static Regeneration과 결합되면 getStaticProps는 오래된 페이지가 재검증되고 브라우저에 새로운 페이지가 제공되는 동안 백그라운드에서 실행됩니다.

(getStaticProps 을 사용하여 페이지를 정적으로 생성하는 방식은 언제나 빌드 시 미리 렌더링 하지만, ISR 방식은 revalidate을 Props에 return 하면서 일정 주기마다 데이터를 재검증하고, 업데이트된 데이터로 재생성 합니다. )

 

getStaticProps는 빌드 시 실행되기 때문에 정적 HTML을 생성하므로 API 요청(예: 쿼리나, http 호출)에 액세스할 수 없습니다. 페이지에 대한 request가 필요한 경우 getStaticProps와 함께 사용하는 것이 좋습니다.

 

Using getStaticProps to fetch data from a CMS

// posts는 빌드 시 getStaticProps()에 의해 채워집니다.
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

// 이 함수는 빌드시 서버 측에서 실행됩니다.
// 클라이언트 측에서 호출되지 않으므로, 데이터베이스의 쿼리를 직접 호출할 수 있습니다.
export async function getStaticProps() {
  // posts를 가져오기 위해 API를 호출합니다.
  // 데이터를 가져오는 라이브러리를 사용할 수 있습니다.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // { props: { posts } }를 return 하면, Blog component가 빌드시 props로 posts를 받습니다.
  return {
    props: {
      posts,
    },
  }
}

export default Blog

 

Write server-side code directly

getStaticProps는 서버 측에서만 실행되고, 클라이언트 측에서는 실행되지 않습니다. 브라우저용 JS 번들에도 포함되지 않으므로 브라우저로 보내지 않고 직접 데이터베이스 쿼리를 작성할 수 있습니다.

즉, getStaticProps에서 API 경로를 가져오는 대신(자체적으로 외부 소스에서 데이터를 가져옴) getStaticProps에서 직접 서버 측 코드를 작성할 수 있습니다.

 

예로, 일부 데이터를 가져오는데 사용되는 API route는 getStaticProps에서 직접 호출됩니다. 이러한 방식은 추가 호출이 발생하여 성능이 저하됩니다.

그 대신 CMS에서 데이터를 가져오는 로직을 getStaticProps로 이동할 수 있습니다.
또는 API route를 사용하여 데이터를 가져오지 않는 경우 fetch() API를 getStaticProps에서 직접 사용하여 데이터를 가져올 수 있습니다.

 

Statically generates both HTML and JSON

getStaticProps가 있는 페이지가 빌드 시 미리 렌더링되면, 페이지 HTML 파일 외에도 getStaticProps 실행 결과를 포함하는 JSON 파일을 생성됩니다.

이 JSON 파일은 next/link 또는 next/router를 통한 클라이언트 측 라우팅에 사용됩니다. getStaticProps를 사용하여 미리 렌더링된 페이지로 이동하면 Next.js는 이 JSON 파일(빌드 시 미리 계산됨)을 가져와 페이지 구성 요소의 props로 사용합니다. 즉, exports된 JSON만 사용되므로 클라이언트 측의 페이지 전환할 때 getStaticProps를 호출하지 않습니다.

증분 정적 생성을 사용할 때 getStaticProps는 대역 외에서 실행되어 클라이언트 측 탐색에 필요한 JSON을 생성합니다. 동일한 페이지에 대한 여러 요청의 형태로 이를 볼 수 있지만 이는 의도된 것이며 최종 사용자 성능에 영향을 미치지 않습니다.

 

Where can I use getStaticProps

getStaticProps는 페이지에서만 내보낼 수 있습니다. 페이지가 아닌 파일에서는 내보낼 수 없습니다.
페이지가 렌더링되기 전에 React에 필요한 모든 데이터가 있어야 하기 때문에 제한됩니다.(제한 이유 중 하나)
또한 export getStaticProps를 standalone function로 사용해야 합니다. (getStaticProps를 페이지 구성 요소의 속성으로 추가하면 작동하지 않습니다.)

 

Runs on every request in development

개발모드(next dev)에서는 모든 요청에 대해 getStaticProps가 호출됩니다.

 

Preview Mode(미리보기)

일시적으로 정적 생성을 우회하고 빌드 시간 대신 요청 시간에 페이지를 렌더링할 수 있습니다. 예를 들어 헤드리스 CMS를 사용 중이고 초안이 게시되기 전에 미리보기를 원할 수 있습니다.
이 사용 사례는 미리보기 모드 기능으로 Next.js에서 지원됩니다.

 

---

Data Fetching: getStaticProps | Next.js