📋 getStaticProps vs getServerSideProps
getStaticProps와 getServerSideProps는 모두 사전 렌더링이 필요할 때 사용하는 Next.js 내장 기능이다.
그렇다면 이 둘이 정확히 무엇인지, 또 어떤 차이가 있는지 알아보자.
📌 1. getStaticProps
If you export a function called
getStaticProps(Static Site Generation) from a page, Next.js will pre-render this page at build time using the props returned bygetStaticProps. -Next.js 공식 문서
getStaticProps는 빌드할 때 딱 한 번만 실행되는 정적 사이트 생성(Static Site Generation) 함수이다.
다시 빌드를 하지 않는다면 실행되지 않기에 수정될 일이 거의 없는 블로그같은 사이트의 정적 페이지를 렌더링하기에 좋다.
물론 return문의 내부 파라미터로 revalidate라는 속성을 추가해 업데이트 주기를 전달하면 그 업데이트 주기 단위로 페이지가 재생성되기 때문에 다시 빌드를 하지 않아도 props를 업데이트 할 수 있다.
또 동적 페이지를 사전 렌더링 하려면 추가적으로 getStaticPaths 함수를 추가해줘야 한다.
📌 2. getServerSideProps
If you export a function called
getServerSideProps(Server-Side Rendering) from a page, Next.js will pre-render this page on each request using the data returned bygetServerSideProps. -Next.js 공식 문서
getServerSideProps는 getStaticProps와 비슷하지만, 서버 사이드 렌더링(Server Side Rendering)을 위한 함수이다.
요청이 들어올 때마다 호출되고, 그 때마다 사전 렌더링을 진행한다.
getStaticProps와는 다르게 요청이 들어올 때마다 호출되기에 빌드 이후 자주 바뀌는 동적 데이터가 들어갈 때 사용하기 좋다.
매 요청마다 호출되므로 성능은 getStaticPros에 뒤지지만, 내용을 언제든 동적으로 수정이 가능하다.
📌 3. 정리
getStaticProps와getServerSideProps모두 사전 렌더링이 필요한 경우에만 사용하는 것이 좋다.getStaticProps와getServerSideProps는 데이터를 패치하는 함수이다.getStaticProps와getStaticPaths는 정적 사이트 생성(Static Site Generation)을 위해 사용된다.getServerSideProps는 서버 사이드 렌더링(Server Side Rendering)을 위해 사용된다.
추가적으로 Next.js 13 의 공식문서에서는 Static Generation을 추천하고 있는데,
그 이유는 위에도 적어놨듯이 성능상으로 Static Generation가 뛰어나기 때문이다.
물론 상황에 따라 유연하게 사용할 수 있는 것이 가장 좋다고 생각한다.
