인프런 영문 브랜드 로고
인프런 영문 브랜드 로고

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

amh6281님의 프로필 이미지

작성한 질문수

Next + React Query로 SNS 서비스 만들기

에러 상황 처리하기(유저 정보 없음)

SSR prefetchQuery를 사용하는데 왜 UserInfo에서 데이터를 한번 더 가져오는지 모르겠습니다,,,

작성

·

76

·

수정됨

0

안녕하세요! 강의 수강 중 헷갈리는 게 있어 질문 드립니다!!

다름이아니라, 강의 초반에 프로필 페이지가 SSR인 것과 prefetchQuery를 사용하는 것에 이해를 했는데, 왜 하위 컴포넌트인 UserInfo에서 다시 userQuery를 통해 데이터를 가져오는지 모르겠습니다!

서버사이드 환경인 page.tsx에서 데이터를 가져오기 위해 PrefetchQuery를 사용하는 것으로 알고있는데, 그렇다면 UserInfo에서 useQuery를 통해 데이터를 가져오는 것이 아닌 데이터를 props로 넘겨줄 수 있는게 아닌가 싶습니다!

혹시 최상위 page에서 prefetchQuery를 통해 데이터를 먼저 가져와야 그 하위 컴포넌트들 내부의 클라이언트 컴포넌트에서 useQuery를 통해 데이터를 가져올 수 있는건가요?
그렇다면 prefetchQuery없이 클라이언트 컴포넌트에서 userQuery만 사용해도 되나요?

답변 2

0

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

prefetchQuery를 통해서 데이터를 불러오면 하위 컴포넌트의 useQuery들은 별도 로딩없이 그 데이터를 바로 받아서 쓸 수 있습니다. useQuery로 데이터를 다시 불러왔다는 건 네트워크 요청이 발생했다는 뜻인가요? 데이터의 staleTime을 조절하셨나요?

amh6281님의 프로필 이미지
amh6281
질문자

아뇨! 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를 통해 데이터를 불러올 때 로딩 없이 바로 받아 쓸려고 사용하는거군요!

제로초(조현영)님의 프로필 이미지
제로초(조현영)
지식공유자

한 번 더 불러오는게 이상한 동작입니다. 데이터가 stale같은데요

0

인프런 AI 인턴님의 프로필 이미지

안녕하세요, 인프런 AI 인턴입니다.

amh6281님의 질문에 대해 React Query와 Next.js의 데이터 페칭 관련 개념이 혼동될 수 있는 부분을 조금 더 명확히 설명해 드리겠습니다.

React Query의 prefetchQuery와 SSR

  1. prefetchQuery의 역할 및 활용: prefetchQuery는 주로 서버 측에서 데이터를 미리 가져와 쿼리 캐시에 저장하는 데 사용됩니다. 이는 클라이언트가 해당 데이터를 필요로 할 때 빠르게 접근할 수 있도록 돕는 것이 기본적인 목적입니다. 이를 통해 데이터가 클라이언트 사이드 컴포넌트에 필요한 시점 전에 미리 준비되어 있게 됩니다.

  2. 데이터 전달과 Hydration: 서버에서 prefetchQuery를 사용하여 데이터를 가져오고 쿼리 캐시에 저장하면, 클라이언트 컴포넌트에서는 useQuery로 해당 데이터를 재사용합니다. 여기서 중요한 점은, useQuery는 이미 쿼리 캐시에 존재하는 데이터를 사용하기 때문에 추가적인 네트워크 요청이 진행되지 않습니다. 대신 쿼리 캐시에서 즉시 데이터를 가져옵니다.

  3. UserInfo 컴포넌트와 데이터 활용: UserInfo 컴포넌트에서 useQuery를 사용하는 이유는, 클라이언트 컴포넌트가 서버 사이드에서 받아온 데이터를 동일한 쿼리 키를 통해 접근하여 사용할 수 있게 하기 위함입니다. 이렇게 함으로써 컴포넌트가 처음 마운트될 때 데이터를 이미 prefetch된 상태로 불러올 수 있게 됩니다.

  4. props로 데이터 전달 vs. useQuery 사용: 데이터를 직접 props로 전달할 수도 있지만, useQuery를 사용하면 쿼리 캐시의 부가적인 포인트인 자동 리페칭, 데이터 신선도(staleness) 관리 등의 이점을 활용할 수 있습니다.

추가적으로 “prefetchQuery”와 관련된 유사한 질문과 답변을 확인하시면 도움이 될 수 있습니다. 아래 링크를 참고해 주세요:
- “tanstack-query prefetchQuery 질문”: prefetchQuery의 사용과 데이터 관리 방법에 대한 여러 상황을 다룹니다.
- “유저 정보 관리 방법”: 유저 정보를 react-query로 관리하는 방법의 논의가 도움이 될 수 있습니다.

위 내용을 바탕으로 하위 컴포넌트에서 useQuery를 사용하는 것이 실제로는 React Query의 캐싱 및 데이터 관리의 특장점을 최대로 활용하는 측면임을 이해하시기 바랍니다.

저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.

amh6281님의 프로필 이미지

작성한 질문수

질문하기