작성
·
76
·
수정됨
0
안녕하세요! 강의 수강 중 헷갈리는 게 있어 질문 드립니다!!
다름이아니라, 강의 초반에 프로필 페이지가 SSR인 것과 prefetchQuery를 사용하는 것에 이해를 했는데, 왜 하위 컴포넌트인 UserInfo에서 다시 userQuery를 통해 데이터를 가져오는지 모르겠습니다!
서버사이드 환경인 page.tsx에서 데이터를 가져오기 위해 PrefetchQuery를 사용하는 것으로 알고있는데, 그렇다면 UserInfo에서 useQuery를 통해 데이터를 가져오는 것이 아닌 데이터를 props로 넘겨줄 수 있는게 아닌가 싶습니다!
혹시 최상위 page에서 prefetchQuery를 통해 데이터를 먼저 가져와야 그 하위 컴포넌트들 내부의 클라이언트 컴포넌트에서 useQuery를 통해 데이터를 가져올 수 있는건가요?
그렇다면 prefetchQuery없이 클라이언트 컴포넌트에서 userQuery만 사용해도 되나요?
답변 2
0
안녕하세요, 인프런 AI 인턴입니다.
amh6281님의 질문에 대해 React Query와 Next.js의 데이터 페칭 관련 개념이 혼동될 수 있는 부분을 조금 더 명확히 설명해 드리겠습니다.
React Query의 prefetchQuery와 SSR
prefetchQuery의 역할 및 활용: prefetchQuery
는 주로 서버 측에서 데이터를 미리 가져와 쿼리 캐시에 저장하는 데 사용됩니다. 이는 클라이언트가 해당 데이터를 필요로 할 때 빠르게 접근할 수 있도록 돕는 것이 기본적인 목적입니다. 이를 통해 데이터가 클라이언트 사이드 컴포넌트에 필요한 시점 전에 미리 준비되어 있게 됩니다.
데이터 전달과 Hydration: 서버에서 prefetchQuery를 사용하여 데이터를 가져오고 쿼리 캐시에 저장하면, 클라이언트 컴포넌트에서는 useQuery
로 해당 데이터를 재사용합니다. 여기서 중요한 점은, useQuery
는 이미 쿼리 캐시에 존재하는 데이터를 사용하기 때문에 추가적인 네트워크 요청이 진행되지 않습니다. 대신 쿼리 캐시에서 즉시 데이터를 가져옵니다.
UserInfo 컴포넌트와 데이터 활용: UserInfo
컴포넌트에서 useQuery
를 사용하는 이유는, 클라이언트 컴포넌트가 서버 사이드에서 받아온 데이터를 동일한 쿼리 키를 통해 접근하여 사용할 수 있게 하기 위함입니다. 이렇게 함으로써 컴포넌트가 처음 마운트될 때 데이터를 이미 prefetch된 상태로 불러올 수 있게 됩니다.
props로 데이터 전달 vs. useQuery 사용: 데이터를 직접 props로 전달할 수도 있지만, useQuery
를 사용하면 쿼리 캐시의 부가적인 포인트인 자동 리페칭, 데이터 신선도(staleness) 관리 등의 이점을 활용할 수 있습니다.
추가적으로 “prefetchQuery”와 관련된 유사한 질문과 답변을 확인하시면 도움이 될 수 있습니다. 아래 링크를 참고해 주세요:
- “tanstack-query prefetchQuery 질문”: prefetchQuery의 사용과 데이터 관리 방법에 대한 여러 상황을 다룹니다.
- “유저 정보 관리 방법”: 유저 정보를 react-query로 관리하는 방법의 논의가 도움이 될 수 있습니다.
위 내용을 바탕으로 하위 컴포넌트에서 useQuery
를 사용하는 것이 실제로는 React Query의 캐싱 및 데이터 관리의 특장점을 최대로 활용하는 측면임을 이해하시기 바랍니다.
저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
아뇨! page.tsx에서 prefetchQuery 로직을 통해 데이터를 가져오는 것과, UserInfo.tsx에서
const {data: user, error} = useQuery<User, Object, User, [_1: string, _2: string]>({
queryKey: ['users', username],
queryFn: getUser,
staleTime: 60 * 1000,
gcTime: 300 * 1000,
});
이렇게 데이터를 가져오는 로직이 있어서 이미 page.tsx에서 prefetchQuery를 통해 데이터를 불러왔는데, 왜 UserInfo에서 userQuery를 통해 데이터를 한번 더 불러오는지가 헷갈렸습니다!
결국 prefetchQuery를 통해 데이터를 불러와서 하위 컴포넌트에서 useQuery를 통해 데이터를 불러올 때 로딩 없이 바로 받아 쓸려고 사용하는거군요!