[Next.js(193)]클라이언트 사이드 데이터 페칭의 개요 (언제 사용해야 할까?)

지난시간에 배운 것

• 페이지 사전 렌더링(page pre-rendering)
• 데이터 프리 페칭(data pre-fetching)

이번시간에 배울 것

client-side data fetching

• 지난 시간에 배운것과 반대 개념
• pre-rendered 할 필요없는 데이터
• pre-rendered 할 수 없는 데이터
  ex) 데이터가 매우 빠르게 변화할 때 (주식 데이터)
  ex2) 매우 높게 사용자 구체적인 데이터 (온라인 쇼핑몰의 최근 주문 내역)
  • 검색엔진에서 개인 프로필을 확인하지 않음
  • 사용자가 데이터를 조금 기다려도 ㄱㅊ음.
    ex3) 데이터의 일부분만 표시 (다양한 data가 표시되는 대시보드 페이지는 많은 조각들의 데이터가 있고, 이 데이터를 한번에 불러오도록 하면 서버에서 대시보드 요청을 처리하는데 시간이 많이 소요된다.) => 개발 단계에서 이 페이지를 사전 렌더링할 필요 x (그 페이지는 다분히 개인적이고, 변동이 잦음)

즉, 위와 같은 경우 ,
사전렌더링보다는 주어진 react application에 포함된 data를 사용자가 페이지에 방문할 때만 불러오도록 해야한다.

=> useEffect나, fetch 같은 함수를 이용해서 client 측, react 앱 내의 api에서 데이터를 가져오자.
=> getStaticProps나, getServerSideProps대신 서버가 아니라 client에서 코드가 실행될 때 컴포넌트에서 data를 가져오도록 구축