Skip to main content

getStaticProps

getStaticProps 메서드의 기본 개념과 사용 방법을 알아보겠습니다.

getStaticProps 소개​

getStaticProps 메서드는 블로그, 공지사항, 이벤트 페이지와 같은 정적인 형태(사용자와의 상호 작용이 없는)의 웹 페이지를 표시할 때 사용합니다. 왜냐하면 이 메서드는 애플리케이션을 빌드하는 시점에 호출되어 페이지를 미리 그려놓기 때문이죠.

좀 더 쉽게 얘기하면 이 메서드는 사용자의 URL 입력이나 마우스, 키보드 이벤트와 관계 없이 웹 애플리케이션을 서버에 배포하기 위해서 빌드하는 시점에 실행된다는 의미입니다. 빌드 시점에 미리 호출되어 HTML 결과물만 브라우저로 전송한다는 의미가 어떤 건지는 아래 링크를 통해 확인할 수 있습니다.

Next.js 코드가 빌드된 후 브라우저로 전달되었을 때의 코드 모양

getStaticProps 코드​

어떻게 사용하는지 알아보기 위해 간단한 코드 예제를 보겠습니다.

pages/login.jsx
export async function getStaticProps() {
  const response = await fetch('http://my.api/users/1')
  const user = await response.json()
  return { props: { user } }
}
 
// 로그인 페이지 컴포넌트
export default function LoginPage({ user }) {
  return <div>{user.name}</div>
}

위 코드는 LoginPage라는 페이지 컴포넌트에서 getStaticProps() 메서드를 이용하여 사용자 이름을 화면에 표시합니다. 이 코드는 사용자가 /login 이라는 URL을 입력했을 때 실행되어 결과 값을 화면에 그려주는 것이 아니라 이미 웹 애플리케이션을 빌드하는 시점에 실행되어 다음과 같은 형태로 서버에서 결과물이 제공됩니다.

getStaticProps-before-after

danger

데이터 호출 메서드는 꼭 페이지 컴포넌트 내에서 export 구문을 붙여줘야 동작합니다.

getStaticProps 특징​

  1. getStaticProps 메서드는 사용자의 URL 입력을 받는 실행 시점이 아닌 빌드 시점에 실행되기 때문에 URL 쿼리 스트링이나 HTTP 헤더 정보를 받을 수 없습니다. 하지만, 이 정보들을 꼭 접근해야 한다면 미들웨어를 사용할 수도 있습니다. (이렇게 하는 것보다 차라리 getServerSideProps와 같은 다른 메서드를 사용해야 하는 건 아닌지 꼭 다시 고민해 보세요 😄)
  2. Incremental Static Regeneration(ISR)과 같이 사용하면 빌드 시점이 아니라 revalidate()이 실행되는 시점에 다시 getStaticProps() 메서드가 실행됩니다.

getStaticProps 주의 사항​

  • 페이지 라우터의 다른 데이터 호출 메서드와 마찬가지로 getStaticProps는 페이지 컴포넌트에서만 사용할 수 있습니다. components 폴더나 커스텀 앱(_app), 커스텀 문서(_document)와 같은 파일에서는 사용할 수 없습니다. 이런 제약이 있는 이유는 서버 사이드 렌더링의 목적상 페이지가 렌더링 되기 전에 데이터가 모두 다 준비되어야 하기 때문입니다.
  • 또 다른 주의 사항은 아래와 같이 페이지 컴포넌트 내에서 별도 함수로 구분해야 한다는 점입니다. 만약, 실수로 페이지 컴포넌트 내부에 함수를 정의하면 제대로 동작하지 않습니다.
// ✅ - 페이지 컴포넌트 파일에서 컴포넌트 바깥에 정의
export async function getStaticProps() {
  // ..
}
 
export default function LoginPage({ user }) {
  // ..
}
// ❌ - 페이지 컴포넌트 파일에서 페이지 컴포넌트 내부에 정의
export default function LoginPage({ user }) {
  async function getStaticProps() {
    // ..
  }

  // ..
}