Intro
react 개발 시 useEffect Hooks에서 의존성 배열에 빈[]를 넣을 경우 최초 렌더링 시에 1회만 실행된다. 그렇지만 이 경우 비어있는 배열에 바로 값이 저장되는 형태가 아닌, 최초 렌더링 시에는 비어있는 형태로 렌더링이 되었다가 useEffect가 실행되면서 내부 함수가 실해되는 과정 이후 한 번의 렌더링이 더 있은 후에야 해당 useEffect가 적용되는 형태이기 때문에 안좋은 사용자 경험을 제공하게된다.
이러한 문제를 next.js 에서 제공하는 사전 렌더링 기능으로 렌더링 이전에 미리 값을 지정해두고 최초 렌더링 시 바로 값이 보이게끔 할 수 있다.
사전 렌더링( pre - rendering) 을 위한 data fetching 을 할 수 있는 기능으로 getStaticProps와 getServerSideProps가 있다.
1. getStaticProps
getStaticProps와 다르게 요청이 들어올 때마다 호출되며, 그 때마다 사전 렌더링을 한다. 요청 시 마다 호출되므로 빌드 이후에 자주 바뀌게 될 동적데이터가 들어갈 때 더 사용하기 좋다. 최초 빌드 시에 딱 한 번 호출된다. 즉 최초 빌드 시에 값이 추후에 변경 수정될일이 없는 경우 사용하면좋다. 주로 정점 페이지에 사용된다. Hooks도 사용하지 않아도 된다.
revalidate를 사용하여 요청이 들어올 때마다 주기적으로 업데이트 할 수 있게 설정 할 수 있다.
getServerSideProps 보다 호출 시 데이터 fetch를 하지 않으므로 성능면에서 더 좋다.
2. getServerSideProps
getServerSideProps는 getStaticProps와 다르게 요청이 들어올 때마다 호출되며, 그 때마다 사전 렌더링을 한다. 요청 시 마다 호출되므로 빌드 이후에 자주 바뀌게 될 동적데이터가 들어갈 때 더 사용하기 좋다.
따로 revalitdate로 주기를 정하지 않는 이상 다시 업데이트하지 않는 getStaticProps에 비해 요청이 들어올 때마다 호출하기 때문에 getServerSideProps는 getStaticProps에 비해 성능상으로는 안 좋지만 내용을 언제든지 수정할 수 있다는 특장점이 있다.
