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

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()를 폴리필(polyfill)로 제공합니다. 따로 import 할 필요가 없습니다.

 

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

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 번들에 포함되지도 않습니다. 이것은 브라우저로 전송되지 않고 직접 데이터베이스 쿼리와 같은 코드를 작성할 수 있음을 의미합니다.

 

개발 vs. 프로덕션

• 개발 환경(npm run dev 또는 yarn dev)에서는 getStaticProps가 매 요청마다 실행됩니다.
• 프로덕션 환경에서는 getStaticProps가 빌드 시간에 실행됩니다. 그러나 getStaticPaths에서 반환한 fallback 키를 사용하여 이 동작을 향상시킬 수 있습니다.

빌드 시간에 실행되기 때문에 요청 시간에만 사용 가능한 쿼리 매개변수나 HTTP 헤더와 같은 데이터를 사용할 수 없습니다.

 

페이지에서만 허용됨

getStaticProps는 페이지에서만 내보낼 수 있습니다. 비 페이지 파일에서 내보낼 수 없습니다.

 

이 제한이 존재하는 이유 중 하나는 페이지가 렌더링되기 전에 React가 필요한 모든 데이터를 가지고 있어야 하기 때문입니다.

 

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

Static Generation은 빌드 시간에 한 번 발생하므로 자주 업데이트되는 데이터나 사용자 요청마다 변경되는 데이터에 적합하지 않습니다.

 

이와 같은 경우 데이터가 자주 변경될 가능성이 있는 경우 Server-side Rendering을 사용할 수 있습니다. 다음 섹션에서 서버 측 렌더링에 대해 더 자세히 알아보겠습니다.