인프런 커뮤니티 질문&답변
작성한 질문수
서버, 클라이언트 데이터 중복 호출 문제
작성
·
65
·
수정됨
0
강의와 같이 구현한다면
page.tsx 에서 데이터 fetch
PostRecommends.tsx 에서 는 다시 데이터를 fetch 하지 않고 HydrationBoundary를 통해 넘어온 데이터를 사용
이렇게 page.tsx 에서만 데이터가 fetch 되어야 맞는거지요 ?
제가 구현한 소스코드에서는 getPostRecommends 쪽에 로그를 찍어서 확인해보니 page.tsx 에서도 한번 호출하고 PostRecommends.tsx 에서도 한번 호출해서 총 2번 로그가 찍히더라구요.
이론대로라면 page.tsx 에서 1번 호출했을 때만 로그가 찍혀야 하는 것이 맞는거죠?
아 강의는 " 클라이언트 react-query" 입니다.
답변 2
0
0
안녕하세요, 인프런 AI 인턴입니다.
shan님께서 Next.js와 React Query로 구현하신 SNS 서비스에서 데이터 fetch가 중복되어 발생하는 문제에 대해 설명드리겠습니다.
문제 상황
말씀하신 문제가 발생하는 이유는 서버 컴포넌트와 클라이언트 컴포넌트 간의 데이터 처리 방식의 차이 때문입니다. 일반적으로 다음과 같은 상황을 고려해야 합니다.
서버에서의 데이터 Fetch:
page.tsx에서prefetchQuery를 사용하여 서버에서 데이터를 미리 가져올 수 있습니다. 이 과정은 서버 사이드 렌더링(SSR) 시에 수행되며, 이를 통해 처음 로딩 때 데이터를 서버에서 가져옵니다.클라이언트에서의 중복 Fetch: 클라이언트 컴포넌트인
PostRecommends.tsx에서useQuery를 사용하는 경우, 기본적으로 ‘클라이언트에서 데이터가 없다’고 판단되면, 다시 데이터를 요청하게 될 수 있습니다.
해결 방안
Hydration 사용: 서버 사이드 렌더링 시 데이터를 미리 받아오기 위해
HydrationBoundary를 활용합니다. 이렇게 하면, 서버에서 가져온 데이터를 클라이언트가 초기 마운트 시 가져와서 사용할 수 있게 됩니다. 하지만, 첫 번째 클라이언트 렌더링 후에 다시 fetch를 호출하지 않도록staleTime을 설정하여 데이터가 fresh 상태를 유지하게 해야 합니다.staleTime 및 cache 관리: 클라이언트에서 불필요하게 데이터를 다시 요청하지 않도록 하기 위해,
staleTime및cacheTime등의 옵션을 적절히 설정해야 합니다.
비슷한 주제에 대해 논의한 기존 질문을 참고하시면 문제를 이해하고 해결하는 데 도움이 될 수 있습니다:
- “ tanstack-query prefetchQuery 질문”: 이 질문에서는 prefetchQuery와 useQuery의 병합 사용 사례에 대해 설명하고 있습니다. 특히 React Query의 상태 관리 및 데이터 캐싱 설정에 대한 좋은 실전 예시를 살펴볼 수 있습니다.
추가적으로 궁금한 사항이 있으시면, 이어서 질문해 주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.