React

React DATA- prerendering

썽연 2022. 3. 17. 15:39
728x90

 DATA-prerendering

- next 9.3버전 이전에 getInitialProps만으로 데이터 패치를 전부 해결했지만, 그 이후부터는 getStaticPtops, **getStatiicPath**(Static Generation) / **getServerSideProps** 로 분화되어있음


getInitialProps

- 기본적으로 **데이터 요구사항이 없는 경우 페이지가 정적인지 자동으로 확인**
- getInitialProps나 getServerSideProps를 사용하지 않는다면 페이지를 정적HTML로 사전에 렌더링하여 자동으로 최적화

> 자동 정적 최적화 : getInitialProps가 없으면 페이지를 정적 HTML으로 사전렌더링해서 정적최적화를 함
SSR계산이 없기 때문에 사용자에게 즉시 뿌려지는 ultra fast로딩


 getStaticProps

- 빌드 시에 딱 한번 호출이후, static file로 빌드후 수정이 불가능하다.
- SSG(Static Site Generation)개념
- 앱 빌드후에 왠만하면 바뀌지 않는 내용이 있는 Page가 있는 경우에만 사용하는 것을 권장
- 호출시마다 매번 data fetch를 하지 않으니 getServerSideProps보다 성능면에서 좋음


언제 사용할까!?

- **변하지 않는 공개적인 캐시 데이터를 가져올 필요**가 있을 때
- SEO를 필요로 하는 웹사이트이며, CDN서버에 정적 페이지 배포가 필요할 때


getServerSideProps

- page가 **요청을 받을 때마다 호출되어 pre-rendering** (SSR개념)
- pre-render가 꼭 필요한 동적 데이터가 있는 page에 사용
- 내용을 언제든 **동적으로 수정가능**하다.

언제 사용할까?

- **미리 외부로부터 데이터를 요청하여 페이지에 렌더링**이 필요한 경우
- 페이지 안에서 **최신 정보 지속적으로 업데이트**하는 것이 필요할 때

728x90