[Next.js] getStaticProps와 getServerSideProps

 

Next.js 9.3 미만 버전에서 SSR(Server Side Rendering), SSG(Static Site Generation)를 적용하기 위해서는 getInitialProps 메소드가 활용되었습니다. getInitialProps를 통해 서버에서 미리 필요한 데이터들을 패칭 후 html 파일에 렌더링하고 클라이언트에 전송하여 SEO를 향상할 수 있었습니다. 

 

Next.js 9.3 이상 버전부터 SSR, SSG를 지원하기 위한 새로운 메소드가 등장하였습니다. getStaticProps, getServerSideProps 입니다.

Next.js 공식 문서에도 getInitialProps 대신 getStaticProps와 getServerSideProps을 사용할 것을 권장하고 있습니다.

 

1. getStaticProps

정적 페이지 생성(SSG) 시 활용하는 메소드입니다. 해당 메소드는 번들링(빌드) 단계에서 데이터 패칭이 이루어집니다.

export async function getStaticProps(context) {
  return {
    props: {}, // Page Component의 Props로 전달되는 객체
  }
}

context 매개 변수는 다음의 키를 포함합니다.

• params: 동적 경로를 사용하는 페이지에 대한 경로 정보를 담습니다. 예를 들어 동적 페이지 파일 명이 [id].js 인 경우 contect.params --> {id: ...} 가 반환됩니다. 동적 경로를 사용하기 위해서는 getStaticPaths 메소드를 사용해야 합니다. 이 부분은 아래에서 설명하겠습니다.
• preview: 추후 설명
• previewData: 추후 설명

getStaticProps 다음과 함께 객체를 반환해야 합니다.

• props: 페이지 컴포넌트에 Props로 전달할 객체입니다. (필수)

1-2. getStaticProps 간단 예시

// getStaticProp()에 의해 빌드시에 게시물이 채워집니다.
function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  // 외부 API endpoint로 Call 하여 Post 정보를 가져옵니다.
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // posts 데이터가 담긴 prop를 빌드시간에 Blog 컴포넌트에 전달합니다.
  return {
    props: {
      posts,
    },
  }
}

export default Blog

1-3. getStaticProps 언제 써야 할까?

• 변하지 않는 공개적인 캐시 데이터를 가져올 필요가 있을 때
• SEO를 필요로 하는 웹사이트이며 CDN 서버에 정적 페이지 배포가 필요할 때

 

2. getServerSideProps

서버 사이드 렌더링 (SSR) 시 활용하는 메소드입니다. 해당 메소드는 런타임 환경에서 페이지에 접근 시 서버 측에서 실행됩니다.

export async function getServerSideProps(context) {
  return {
    props: {}, // Page Component의 Props로 전달되는 객체
  }
}

context 매개 변수는 다음의 키를 포함합니다.

• params: 동적 경로를 사용하는 페이지에 대한 경로 정보를 담습니다. 예를 들어 동적 페이지 파일 명이 [id].js 인 경우 contect.params --> {id: ...} 가 반환됩니다.
• req: HTTP Request 정보를 담습니다.
• res: HTTP 응답 객체를 담습니다.
• query: 쿼리 문자열을 담습니다.
• preview: 추후 설명
• previewData: 추후 설명

2-2. getServerSideProps 간단 예시

function Page({ data }) {
  // 데이터 렌더링...
}

// 해당 페이지 컴포넌트 렌더링시 항상 실행 됩니다.
export async function getServerSideProps() {
  // 외부 API로 부터 받은 데이터 패칭
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  // Page 컴포넌트에 props로 전달합니다. 
  return { props: { data } }
}

export default Page

 

2-3. getServerSideProps 언제 써야 할까?

미리 외부로부터 데이터를 요청하여 페이지에 렌더링이 필요한 경우에 사용합니다.

단, getServerSideProps는 페이지 컴포넌트 접근할 때마다 서버에서 항상 실행되기 때문에 getStaticProps 보다 속도가 느리고 추가 구성 없이는 결과 데이터를 캐싱할 수 없습니다.

데이터를 미리 렌더링 할 필요가 없는 경우 클라이언트 측에서 데이터를 패칭 하는 것이 더 효율적입니다.

 

3. 이옐로의 내 마음대로 생각 정리

getStaticProps는 빌드 타임에 데이터를 패칭 하여 페이지 컴포넌트의 props로 전달한다.

SSG 사이트 제작 시, getStaticPaths로 미리 라우팅 될 이동 페이지 세팅을 해줘야 한다.

getServerSideProps는 런타임 시간 때 페이지 컴포넌트에 라우팅 될 때마다 서버에서 실행된다.

 

 

 

참고: nextjs.org/docs/getting-started