[ERROR] React Query hydration

원인

---

SSR을 이용하여 페이지 처리 시 API 등 데이터까지 다 가져와서 화면에 그려지기 때문에
화면에 갑자기 번쩍이며 나타나는것 보다는

SSR을 사용하지 않고 CSR을 이용하여 클라이언트에서 API 를 호출하여 Loading 상태를 별도로 보여주는것이 UX 면에서 좋을꺼라 생각하여

<Suspense fallback={<div>loading...</div>}>
	<컴포넌트들 key={키값}/>
</Suspense>

위와 같은 코드에서

const component = dynamic(() => import('경로'));

<component/>

위 코드로 변경하였을때

컴포넌트 내부에서 react-query 를 이용하여 API 호출 시 IsFetching 을 이용하여 조건 렌더링 부분에서 에러 발생

  if (isFetching) {
		return <loadingComponent />
  }

isFetching 값이 react-query 의 suspense 을 이용하여 처리 하였을때의 값과
CSR로 처리된 isFetching 의 값이 달라서 하이드레이션 문제가 발생

해결

---

react-query 의 suspense 옵션을 false 로 설정하여 처리