[스터디] Tanstack-Query w/ Next.js App Router (ft. fetch)

[rachel490]

Next.js app router 환경에서의 데이터 패칭 방식과 캐싱 전략에 대한 공부 및 논의.

[ 고려할 사항 ]

• tanstack-query가 필요한가?
• fetch와 tanstack-query를 같이 사용할 것인가? 하나로 통일한 것인가?
• 같이 사용할 경우 어떠한 기준점으로 구분지어 사용할 것인가?
• 캐싱전략은 어떻게 가져갈 것인가?
• 두개의 캐싱을 어떻게 동기화할 것인가?
• auth는 어떻게 관리할 것인가? (axios interceptor를 어떻게 구현?)

[rachel490]

1. tanstack query 필요하다고 생각 : infinite-scroll, mutation 일어났을때 invalidate 등을 처리할 때 필요.
2. fetch와 tanstack-query 같이 사용
   • tanstack-query를 사용 : 완전한 client-component / server-component + client component 로 SSR+CSR Hydration 결합하여 사용
     => client-component가 필수적으로 필요하므로 일반적인 data-fetching만 있는 경우에도 CSR을 거치게 되면서 client component가 필요해짐
     => 자바스크립트 번들 사이즈가 커질 수 있음.
   • fetch 사용 : client component 없이 오직 server component만을 사용할 수 있음
     => 자바스크립트 번들 사이즈 최소화
3. 같이 사용할 경우 어떤 경우에 어떤 렌더링 방식 + fetch / tanstack query를 사용할지

user action	personalized data	Rendering Type	Methods	Specific Use Case
✅	✅	SSR + CSR	refetchQuery +HydrationBoundary +useQuery	- read data + mutate action + update data
✅	❎	SSR + CSR	refetchQuery +HydrationBoundary +useInfiniteQuery	- read data + infinite scroll
❎	✅	SSR (ISR / SSG can't be used w/ personal data. personal data can be leaked once cached)	fetch + no-cache	- personalized data w/ only read
❎	❎	SSG / ISR	- SSG : fetch + cache infinite - ISR : fetch + revalidate - polling : refetchQuery + HydrationBoundary + refechInterval	- SSG : static data fetching w/o any dynamic data => ex. 랜딩 페이지 - ISR : data fetching that needs update. dynamic routes can be used. => the current user can't see the updated info while the next user can. If the current user wants to see the updated data it should re-enter the page or refresh the page. - polling : data fetching that needs update w/o any actions of user. => the current user can see the updated data w/o any refresh or re-enter

4. 위의 표에 나와있음

• SSR + CSR Hydration :
  • tanstack-query에서 server용 QueryClient와 client용 QueryClient를 별도로 정의 -> 기본 1분?
  • server용 QueryClient는 모든 데이터 요청마다 서버용 queryClient를 만듦 => server data는 stateless 해야하므로
  • client용 QueryClient는 전역에서 하나로 통일해서 사용 -> 기본 5분?
• SSG : cache infinite
• ISR : revalidate option : 기본 3600
• SSR : no-cache

5. 위의 표에 나와있음
   • SSR + CSR의 경우에는 같은 데이터 패칭이 server-side, client-side에서 각각 1번씩 일어나므로 동기화가 필요
   • Server Component에서 prefetchQuery & HydrationBoundary에 데이터 hydrate
   • Client Component에서 useQuery, useSuspenseQuery 등 사용하여 hydrate된 데이터 가져다가 씀