[Next.js Learn] Pre-rendering and Data Fetching(7) - getStaticProps Details

getStaticProps 세부사항(getStaticProps Details)

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

Development vs. Production

• 개발 환경에서 (npm run dev 또는 yarn dev), getStaticProps는 매 요청마다 실행됩니다.
• 제품 환경에서는 getStaticProps는 빌드 시간에 실행됩니다. 그러나 getStaticPaths에서 반환된 fallback key를 사용하여 이 동작을 개선할 수 있습니다.

빌드 시간에 실행되도록 설계된 getStaticProps는 쿼리 매개변수나 HTTP 헤더와 같이 요청 시에만 사용 가능한 데이터를 사용할 수 없습니다.

Page 컴포넌트에서만 사용 가능

getStaticProps는 page 컴포넌트에서만 사용할 수 있습니다. page 컴포넌트 외의 파일에서는 export할 수 없습니다.

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

요청 시간에 데이터를 보내야 한다면 어떡하나요?

정적 생성은 빌드 시간에 한 번 발생하기 때문에 자주 업데이트되거나 사용자 요청마다 변경되는 데이터에는 적합하지 않습니다.

이와 같은 경우에는 서버 사이드 렌더링(Server-side Rendering)을 사용할 수 있습니다. 다음 섹션에서 서버 사이드 렌더링에 대해 자세히 알아보도록 하겠습니다.

출처: https://nextjs.org/learn/basics/data-fetching/getstaticprops-details