[Next.js] getStaticProps vs. getServerSideProps

getStaticProps vs. getServerSideProps

getStaticProps

"빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드됩니다. 따라서, 이후 수정이 불가능합니다.
SSG (Static Site Generation) 개념입니다.

getServerSideProps

"page가 요청받을때마다" 호출되어 pre-rendering합니다.
SSR (Server Side Rendering) 개념입니다.
pre-render가 꼭 필요한 동적 데이터가 있는 page에 사용하면 됩니다.
매 요청마다 호출되므로 성능은 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

고찰

• getServerSideProps에선 hooks를 사용할 수 없다.
  fetch를 사용해서 데이터를 가져온 뒤 props를 return 한 것을 컴포넌트에서 가져오는 방식으로 사용해야 될 것 같다.
• 리덕스를 사용하지 않아서 비지니스 로직을 모두 리덕스에 담을 수 없는 점은 아쉬운 것 같다.
• React 18버전이 정식 출시되고 다른 라이브러리들의 dependencies에서 React18이 추가가 된다면 Next.js 12의 React Server Components를 이용해서 테스트해보고 싶다.

참고

• https://beside-lab.tistory.com/entry/Nextjs-getStaticProps-vs-getServerSideProps-%EC%B0%A8%EC%9D%B4%EC%99%80-%ED%99%9C%EC%9A%A9
• https://nunucompany.tistory.com/5