Next.js 와 React Query SSR 네트워크 요청관련

Question

현재 next.js 13버전과 react query를 같이 사용하고있습니다.

https://tanstack.com/query/v4/docs/react/guides/ssr

공식문서에 나와있는 방법중 Hydration 방식을 사용하고있는데

서버 컴포넌트에서 prefetchQuery 를 하고 클라이언트 컴포넌트에서 useQuery 를 같은 키값으로 한다면 클라이언트 즉, 브라우저 네트워크 탭을 확인했을때 해당 요청이 네트워크 탭에서는 확인이 안되어야 정상일까요?

김하림 · Answer

서버 컴포넌트에서 prefetchQuery를 하고 받아온 데이터를 클라이언트 컴포넌트에 잘 전달했다면, 패칭이 일어나지 않는 게 맞습니다. 다만, `staleTime` 설정이 기본값인 `0`으로 되어있다면 서버에서 미리 데이터를 받아왔어도 이미 만료(stale)된 데이터로 취급되기 때문에 다시 패칭을 시도할 겁니다. 패칭이 일어나지 않게 하려면 useQuery 옵션 또는 QueryClient `defaultOptions.queries` 옵션의 `staleTime` 값을 원하는 값으로 설정해주면 됩니다. 예를 들어 `staleTime: 1000`로 설정하면 1초 동안은 데이터가 새 것(fresh)으로 취급됩니다.