Next.js - getStaticProps vs. getServerSideProps, 차이와 활용

 

Next.js 9.3 버전부터는 pre-rendering을 위한 data fetching을 위한 기존 기능인 getInitialProps가  getStaticProps, getServerSideProps, getStaticPaths로 분리되었습니다.

 

모두 pre-render가 필요한 경우에만 사용하는 것이 좋습니다.

(원문: If you don’t need to pre-render the data, then you should consider fetching data on the client side.)

 

이 중 많이 사용되는 getStaticProps와 getServerSideProps의 차이와 활용에 대해 알아보겠습니다.

 

 

per-render가 필요한 경우 (SEO, Adsense 등)는 이 링크를 통해 알아보세요

---

getStaticProps

"빌드 시에 딱 한 번"만 호출되고, 바로 static file로 빌드됩니다. 따라서, 이후 수정이 불가능합니다.

 

SSG (Static Site Generation) 개념입니다.

 

앱 빌드 후에 웬만하면 바뀌지 않는 내용 (고정된 내용)이 있는 page가 있는 경우에만 사용하는 것이 좋겠지요?

 

장점은 호출 시 마다 매번 data fetch를 하지 않으니 getServerSideProps보다 성능면에서 좋습니다.

 

 

getServerSideProps

"page가 요청받을때마다" 호출되어 pre-rendering합니다.

 

SSR (Server Side Rendering) 개념입니다.

 

pre-render가 꼭 필요한 동적 데이터가 있는 page에 사용하면 됩니다.

 

매 요청마다 호출되므로 성능은 getStaticProps에 뒤지지만, 내용을 언제든 동적으로 수정이 가능합니다.