getStaticProps와 getServerSideProps in next.js

오늘은 next.js에서 data fetching 방식인 getStaticProps, getStaticPaths, getServerSideProps중 getStaticProps와 getServerSideProps에 대해 보도록 하겠습니다.(getStaticPaths은 거의 써본적이 없습니다;;)

 

구버전 next에서는 data fetching을 getInitialProps으로 진행했는데, 9.3부터는 getStaticProps, getStaticPaths, getServerSideProps으로 나뉩니다.

 

getStaticProps

docs정의: Fetch data at build time, pre-render for  Static Generation

빌드시 고정되는 값으로, 빌드이후에는 변경이 불가합니다.

 

function Blog({ posts }) {
  return (
    <ul>
      {posts.map((post) => (
        <li>{post.title}</li>
      ))}
    </ul>
  )
}

export async function getStaticProps() {
  const res = await fetch('https://.../posts')
  const posts = await res.json()

  // By returning { props: posts }, the Blog component
  // will receive `posts` as a prop at build time
  return {
    props: {
      posts,
    },
  }
}

export default Blog

 

docs example을 보면, fetch를 통해 posts값을 가져오고 posts값을 Blog component에서 <li>태그 속에서 띄워주고 있습니다.

 

getServerSideProps

docs정의: Fetch data on each request. pre-render for  Server-side Rendering

빌드와 상관없이, 매 요청마다 데이터를 서버로부터 가져옵니다.

 

function Page({ data }) {
  console.log(this.props.data)
 //res.json()이 찍힙니다
}


export async function getServerSideProps() {
 
  const res = await fetch(`https://.../data`)
  const data = await res.json()

  return { props: { data: data } }
}

export default Page

 

docs example을 보면, fetch를 통해 data값을 가져오고 data를 Page component에서 this.props.data로 접근이 가능한 형식입니다.

 

 

 

getStaticProps와 getServerSideProps은 별 차이가 없어 보이지만, 빌드 이후 변경가능여부가있으니주의해주세요

 

요약:

@ getStaticProps: static data를 위해 data fetching

@ getServerSideProps: ssr을 위해 data fetching

@ getStaticProps와 getServerSideProps의 차이는 빌드이후에도 data 변경가능 여부입니다.

 

 

 

읽기 어려우시면 아래 링크를 참조해주세요:

https://medium.com/%EB%8F%84%EA%B9%A8%EB%B9%84-%EC%9D%B4%EC%95%BC%EA%B8%B0/getstaticprops%EC%99%80-getserversideprops-in-next-js-ab076c253d2c