인프런 커뮤니티 질문&답변

react-query의 쓰임새가 잘 이해가 안가서 질문드립니다.

1. 컴포넌트가 server component 일때는 react-query에 prefetchQuery를 사용하여 미리 서버에서 데이터를 가져오고 dehydrate를 통하여 클라이언트에 전송할수있는 형태로 만들어주고,
HydrationBoundary 로 감싸여진 클라이언트 컴포넌트는 서버에서 미리 가져온 데이터를 클라이언트의 쿼리 캐시에 적용하여, getQueryData를 사용하여 네트워크 요청 없이 데이터를 가져올수있고,
useQuery 같은 경우에는 미리 가져온 데이터 외에 클라이언트에서 데이터를 가져올 때 사용하는 걸로 이해했습니다. 맞을까요??

2. queryKey 같은 경우에는 queryFn에 있는 함수에 queryKey를 넘기는 경우가 있고 안넘기는 경우가 있던데 강의에서 props에 따라 키가 바뀌는 경우에만 넘기게 된다고 이해했습니다.
그러면 server component에서 모든걸 prefetchQuery 해서 getQueryData 로 가져다 쓰지 않는 이유가 useQuery를 이용해서 key 값을 다이나믹하게 바뀌는 요청들을 컨트롤 하기 위해서라고 생각이 들었습니다.
하지만 아래와 같이 queryKey를 넘기지 않는 경우에도 useQuery를 사용하는데 prefetchQuery를 해놓고 getQueryData 를 사용할지, prefetchQuery 를 사용하지않고 useQuery를 사용할지 에 대해서 나누는 기준이 있을까요?

const { data } = useQuery<Hashtag[]>({
    queryKey: ["trends"],
    queryFn: getTrends,
    staleTime: 60 * 1000,
    gcTime: 300 * 1000,
    enabled: !!session?.user,
  });