getStaticProps

getStaticProps는 Next.js에서 제공하는 서버사이드 함수로, 빌드 시에 데이터를 가져와 페이지를 사전 렌더링(Pre-render)하는 데 사용됩니다. 이 함수는 페이지의 정적 버전을 미리 생성하며, 재사용 될 수 있기 때문에 퍼포먼스를 크게 향상시킬 수 있습니다.

이 함수의 주요 사용 사례는 블로그 게시물, 제품 목록, 도움말 페이지와 같이 미리 생성할 수 있는 페이지에 대한 데이터를 가져오는 것입니다. getStaticProps는 빌드 시에 한 번만 호출되고, 모든 요청에 대해 재사용됩니다. 이로 인해 사용자는 매우 빠르게 페이지를 로드할 수 있습니다.

getStaticProps를 사용하면, 서버 사이드 코드(Node.js 코드)를 페이지에 직접 작성할 수 있습니다. 이 코드는 빌드 시에만 실행되며, 클라이언트 측에는 전송되지 않습니다. 이렇게 하면 데이터베이스에 직접 접근하거나 비밀 키를 사용해 API를 호출하는 등의 작업을 안전하게 수행할 수 있습니다.

아래는 getStaticProps의 기본적인 사용법을 보여주는 예시입니다:

export async function getStaticProps() {
  // 데이터를 가져오는 코드
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  return {
    props: {
      posts,
    },
  }
}

export default function Blog({ posts }) {
  // 데이터를 렌더링 하는 코드
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

위 코드에서 getStaticProps 함수는 외부 API에서 포스트를 가져옵니다. 이 데이터는 페이지 컴포넌트에 props로 전달됩니다. 이렇게 하면 페이지는 빌드 시에 해당 데이터를 사용해 사전에 렌더링됩니다.

Next.js 9.3 버전부터는 getStaticProps에 revalidate 옵션을 추가하여 정적 페이지를 주기적으로 업데이트할 수 있게 되었습니다. 이를 통해 동적으로 변하는 데이터를 반영하면서도 정적 사이트 생성의 장점을 유지할 수 있습니다.