Pre-rendering

우선 getInitialProps, getStaticProps 2가지 기능은 모두 pre-rendering가 필요한 상황에서만 사용하는 것이 좋습니다.

next 에서 모든 페이지가 사용자에게 전해지기 전에 HTML을 미리 생성해서 pre-rendering을 수행합니다.

getInitialProps

page가 요청받을때마다 호출이 되어 pre-rendering을 합니다.
즉 pre-render가 꼭 필요한 동적 데이터를 사용할 때 사용합니다.

예를 들어 커뮤니티의 게시판의 글 목록을 SSR 방식으로 구현하기 위해서는 getInitialProps를 사용해야합니다.

게시판의 글 목록은 새로운 글이 생길때마다 데이터가 변하게 될 것이고 이를 User가 페이지를 호출 할 때마다 데이터 변경이 되어 pre-render되어야 하기 때문입니다.

매 요청마다 호출되므로 성능은 getStaticProps에 비해 줄어들지만 내용을 언제든 동적으로 수정이 가능하다는 장점이 있습니다.

getStaticProps

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

앱 빌드 후 웬만하면 변경되지 않는 데이터를 사용하는 경우에 사용하는 것이 좋습니다.

성능면에서는 getInitialProps보다 뛰어납니다.