사용하게 된 계기
React, Next, Zustand, TS 사용해서 프로젝트를 하나 만들고 있는게 있는데, 실시간으로 데이터를 잘 받아와서 띄워주는게 굉장히 중요한 웹페이지다.
계속 데이터도 fetch해와야 하고, 버벅거리지도 않아야 해서 완전 SSR로 가기에는 부담스럽고... 어떻게 해야할지 Next.js 공식문서를 보다가 정확히 내 상황을 찾았다.
The data is frequently updated, which requires request-time data fetching.
SWR
The team behind Next.js has created a React hook for data fetching called SWR. We highly recommend it if you’re fetching data on the client side. It handles caching, revalidation, focus tracking, refetching on interval, and more. We won’t cover the details here, but here’s an example usage: ....
출처 : https://nextjs.org/learn-pages-router/basics/data-fetching/request-time
자주 데이터가 변경되어야 하고, 유저가 어떤 데이터를 불러올지 서버가 모르는 상황에서는 어쩔 수 없이 Client-side rendering을 해야한다. 그렇다고 싹 다 JS에서 useEffect써서 fetch해오자니 무식한것같고... 딱 SWR이 맞았다.
공식문서를 보면서 학습중이다. DB에서 불러온 데이터는 서버에 저장해두기에는 개인별로 어떤 데이터를 불러올지 모르기 때문에 전역상태(Zustand) 안 쓰고 SWR 쓰는게 더 좋을 것 같다.
