간단한 이슈였다.

react-query 공식 docs에서

내 문제는 다음과 같았는데

1. 새로고침시 처음에 예전 데이터가 보여짐 (motion.div) 같은 경우 0.1 오퍼시티로 잡혀져있어서 확실하게 렌더링 되는 걸로 볼수있다
2. 그리고 서스펜스가 로딩됨 서스펜스에서 loading시에 스켈레톤이 나오게 해놔서 로딩 컴포넌트가 보임
3. 리스트를 전부 패칭하고 렌더링

그래서 처음에 나온 데이터와, 나중에 나올 데이터가 다르고, 중간에 스켈레톤까지 껴들어서 뭔가 뭐를 이상함을 계속 느끼고 있었다 데이터가 적고 반응 속도가 빨라서 뒤늦게안 문제였다.

이 부분을 해결하려고 보니까 일단 무조건 캐싱 문제 일것 같았는데 리액트 쿼리가 왜 계속 쿼리 데이터를 들고 있는지가 희안했는데

내 예전 설정이 일단 공식문서에서 사용하는 방식과 굉장히 달랐다

A quick note on Suspens#

This guide uses the regular useQuery API. While we don't necessarily recommend it, it is possible to replace this with useSuspenseQuery instead as long as you always prefetch all your queries. The upside is that you get to use <Suspense> for loading states on the client.

If you do forget to prefetch a query when you are using useSuspenseQuery, the consequences will depend on the framework you are using. In some cases, the data will Suspend and get fetched on the server but never be hydrated to the client, where it will fetch again. In these cases you will get a markup hydration mismatch, because the server and the client tried to render different things.

Suspense를 사용하는건 애초에 prefetch를 고려한 사용일때라는 내용이었다 . 나는 프리패칭없이 suspense 인피니티 쿼리를 사용하고 있었다

그래서 그런지 서버에서 gc타임에 이용한 캐시데이터를 먼저 보여준 후 (나는 gc가 하루로 되어있었다.) suspense 쿼리에서 프리패칭한 데이터가 없으므로 query를 호출하고 받아온 데이터를 사용함으로써 서버와 클라이언트간의 괴리가 발생중이였다.

그리고 내 환경에서도 근본적인 결함이있었는데 나는 baseQueryClient를 한번만 사용함으로써 모든 서버와 클라이언트에 동일한 queryClient를 사용중이였다

이 패턴을 제거하고 리액트에서 제공하는 방법을 사용해서 각 환경마다 고유의 클라이언트를 사용하게했다.

여튼 프리패칭을 사용하여 기존 데이터를 가져오게 하고 그거를 쿼리키를 맞춰줌으로써 해당 이슈를 제거했다..

와 이렇게 보니까 되게 간단하고 어이없는 문제였는데 . 구현에만 집중하다보니 이런 간단한 이슈도 놓쳐버리게 되는것 같다. 공식 docs와 , 어떤 기술을 사용하려면 사용법에 대해서 주의 깊게 읽어볼것