[Next.js] Data Fetching > getStaticProps

장유진·2022년 10월 25일

Next.js

목록 보기

5/6

원본: https://nextjs.org/docs/basic-features/data-fetching/get-static-props

만약 getStaticProps라는 함수를 export 한다면 Next.js는 getStaticProps에 의해 반환된 props를 사용하여 빌드 타임에 페이지를 사전 렌더링할 것이다.

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

getStaticProps 사용해야 할 때

페이지를 렌더링하기 위해 필요한 데이터가 user requset 이전에 사용 가능할 때
데이터가 headless CMS에서 올 때
페이지가 SEO를 위해 반드시 사전 렌더링 되어야 하고 빨라야 할 때
데이터가 public하게 캐시 가능할 때

getStaticProps 실행 시점

getStaticProps는 항상 클라이언트가 아닌 서버에서 실행된다. 클라이언트 사이드에서는 getStaticProps 내부의 코드가 지워진다.

getStaticProps는 항상 next build 중에 실행된다.
fallback: true를 사용하면 getStaticProps는 백그라운드에서 실행된다.
fallback: blocking을 사용하면 첫 렌더링 이전에 실행된다.
revalidate를 사용하면 백그라운드에서 실행된다.
revalidate()를 사용하면 백그라운드에서 요청 시 실행된다.

getStaticProps는 정적인 HTML을 생성하므로 들어오는 요청에 엑세스할 수 없다. 따라서 페이지 요청에 엑세스하기 위해서는 getStaticProps와 middleware를 함께 사용해주어야 한다.

직접 server-side 코드 작성하기

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

즉, getStaticProps에서 API 경로를 가져오는 대신 getStaticProps에서 직접 서버 측 코드를 작성할 수 있다는 것이다.

또는 API 경로를 사용하여 데이터를 가져오지 않는 경우 fetch() API를 getStaticProps에서 직접 사용하여 데이터를 가져올 수 있다.

예제코드)

export async function loadPosts() {
  // Call an external API endpoint to get posts
  const res = await fetch('https://.../posts/')
  const data = await res.json()

  return data
}

// pages/blog.js
import { loadPosts } from '../lib/load-posts'

// This function runs only on the server side
export async function getStaticProps() {
  // Instead of fetching your `/api` route you can call the same
  // function directly in `getStaticProps`
  const posts = await loadPosts()

  // Props returned will be passed to the page component
  return { props: { posts } }
}

정적으로 HTML과 JSON 생성

getStaticProps를 사용하는 페이지가 빌드 타임에 사전 렌더링될 때 Next.js는 HTML파일 뿐만 아니라 getStaticProps의 결과를 가지고 있는 JSON 파일도 생성한다.

이 JSON 파일은 next/link나 next/router를 통한 클라이언트 사이드 라우팅에 사용된다. getStaticProps를 사용하는 페이지로 이동할 때 Next.js는 이 JSON 파일을 fetch하고 페이지 컴포넌트의 props로 사용한다. 즉, 클라이언트 사이드에서 페이지 이동이 발생할 때 getStaticProps는 실행되지 않고 JSON 파일이 사용된다는 뜻이다.