[Next.js] getStaticProps 세부 정보

다음은 getStaticProps에서알아야 할 몇가지 필수 정보입니다.

 

외부 API 또는 쿼리 데이터베이스 가져오기

lib/posts.js에서 파일 시스템에서 데이터를 가져오는 getSortedPostsData를 구현 했습니다.

그러나 외부 API 엔드 포인트와 같은 다른 소스에서 데이터를 가져 올 때도 제대로 동작합니다.

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from an external API endpoint
  const res = await fetch('..')
  return res.json()
}

Next.js는 fetch()를 기본으로 제공합니다. 따로 가져올 필요 없습니다.

 

데이터베이스를 직접 쿼리 할 수도 있습니다.

import someDatabaseSDK from 'someDatabaseSDK'

const databaseClient = someDatabaseSDK.createClient(...)

export async function getSortedPostsData() {
  // Instead of the file system,
  // fetch post data from a database
  return databaseClient.query('SELECT posts...')
}

이는 getStaticProps가 서버 측에서만 실행 되기 때문에 가능합니다. 클라이언트 측에서는 실행되지  않습니다.

브라우저용 JS 번들에도 포함되지 않습니다.

즉, 데이터베이스 쿼리와 같은 코드를 브라우저로 보내지 않고도 직접 작성 할 수 있습니다.

---

Development vs Production

- Development(npm run dev 또는 yarn dev)에서는 getStaticProps가 모든 요청에 대해 실행 됩니다.

- Production에서는 빌드 시 getStaticProps가 실행 됩니다.

그러나 이 동작은 fallback, getStaticPaths에 의해 반환된 키를 사용하여 향상 할 수 있습니다.

 

빌드 시 실행되기 때문에

쿼리 매개변수나 HTTP 헤더와 같이 요청 시에만 사용 할 수 있는 데이터는 사용 할 수 없습니다.

---

페이지에서만 허용됨

getStaticProps는 페이지에서만 export 할 수 있습니다. (사용 할 수 있습니다.)

페이지가 아닌 파일에서는 export 할 수 없습니다. (사용 할 수 없습니다.)

 

이렇게 제한된 이유 중 하나는

페이지가 렌더링 되기 전에 React에 필요한 모든 데이터가 있어야 하기 때문입니다.

---

요청 시 데이터를 가져와야 하는 경우에는 어떻게 하나요??

정적 생성(SSG)은 사용자의 요청에 앞서 페이지를 미리 렌더링 할 수 없는 경우에는 사용하지 않는 것이 좋습니다.

그 밖에도 페이지에서 사용하는 데이터에 업데이트가 자주 발생하는 경우에는

서버 측 렌더링(SSR)을 사용하거나 사전 렌더링을 건너 뛸 수 있습니다.

---

 

Learn | Next.js