client side data fetching

언제 client side에서 data fetching을 할까? 

next.js를 사용한다고 해서 항상 모든 데이터를 미리 렌더링(pre-rendering) 해야 하는 것은 아니다. 아래와 같은 경우에는 사용자가 페이지에 방문했을 때 data fetching을 하는 것이 적절하다. 

 

1. 매우 잦은 빈도로 변경되는 데이터 ex) stock data 
   • 미리 데이터를 준비해서 화면에 렌더링하는 순간, 그 데이터는 구식이 된다.  
2. 사용자 개인에게만 특정되어있는 데이터 ex) 장바구니, 프로필
   • SEO와 관계 없음
3. 대시보드 페이지의 부분적인 데이터
   • 모든 데이터를 한 번에 받아오고 페이지를 준비하면, 서버에 부하가 생길 수 있음

 

client 측에서 데이터를 받아올 때에는 이전처럼 useEffect 훅을 사용할 수 있으며, tanstack query와 같은 라이브러리를 통해 fetched data의 다양한 상태(loading, error...)를 간편하게 관리할 수 있다. 

+) useSWR | next.js가 제공하는 커스텀 훅, tanstack query의 useQuery와 동일한 역할을 한다. 

combine SSR and client side data fetching(example code)

1. getStaticProps 또는 getServerSideProps으로 데이터를 전달한다. => SEO에 반영
2. page component 내부에서도 데이터를 fetch 한다. => SEO에 반영❌