서버, 클라이언트 데이터 중복 호출 문제
144
작성한 질문수 1
강의와 같이 구현한다면
page.tsx 에서 데이터 fetch
PostRecommends.tsx 에서 는 다시 데이터를 fetch 하지 않고 HydrationBoundary를 통해 넘어온 데이터를 사용
이렇게 page.tsx 에서만 데이터가 fetch 되어야 맞는거지요 ?
제가 구현한 소스코드에서는 getPostRecommends 쪽에 로그를 찍어서 확인해보니 page.tsx 에서도 한번 호출하고 PostRecommends.tsx 에서도 한번 호출해서 총 2번 로그가 찍히더라구요.
이론대로라면 page.tsx 에서 1번 호출했을 때만 로그가 찍혀야 하는 것이 맞는거죠?
아 강의는 " 클라이언트 react-query" 입니다.
답변 2
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의 상태 관리 및 데이터 캐싱 설정에 대한 좋은 실전 예시를 살펴볼 수 있습니다.
추가적으로 궁금한 사항이 있으시면, 이어서 질문해 주세요. 저는 질문자님의 이해를 돕고자 지식공유자님의 기존 답변을 참고하여 유사한 답변 링크를 추천해드리고 있습니다.
현재 베타 기능으로 답변이 만족스럽지 않을 수 있는 점 양해 부탁드립니다. 🙏
추가적으로 궁금한 점이 있으시면, 이어서 질문해 주세요. 곧 지식공유자께서 답변해 주실 것입니다.
캡처링부분 질문있습니다.
0
74
2
깃에 소스코드를 찾을 수 없습니다.
0
113
2
useInfiniteQuery promise와 react use 사용시 페이지 무한 로딩
0
98
1
import 파일 경로를 찾지 못 해서 에러가 발생합니다.
0
109
2
css 라이브러리 추천 부탁드립니다
0
140
2
팔로우 추천 목록이 빈 배열로 들어옵니다.
0
130
1
게시물 업로드 시 userId가 undefined로 들어가는 오류
0
119
1
useSuspenseQuery 사용 시 SSR 401 이슈 관련
0
171
1
리액트 쿼리 useinfinitequery 무한스크롤 구현 시 페이지가 이동할 경우 데이터가 보존되게 할 수 있나요??
0
184
3
폴링이 필요없는 이유
0
93
2
next Request Memoization과 react cache
0
108
2
seo 최적화 기준은 데이터 fetching인가요 아님 데이터 렌더링인가요?
0
84
2
next.js 서버fetch 에러 fallback ui 구현 방법
0
173
2
프레임워크 여론 파악법
0
125
2
필터옵션이 많은 페이지에서 서버 fetch를 하는게 맞는걸까요??
0
103
2
서버 fetch suspense 로 감싸고 새로고침 시 잠시 빈 화면이 노출된 후 fallback ui가 노출됩니다.
0
102
2
template.tsx 내 서버fetch 응답값과 클라이언트 컴포넌트 상태값 싱크가 맞지 않는 이슈
0
66
2
Auth.js 사용 시 authorize 함수가 호출되지 않습니다
0
131
2
next.js 에서 로그인에 관하여
0
138
1
Next의 route handler에 대한 질문이 있습니다.
0
101
2
게시판 리스트 만들때 use client를 어디서부터 집어넣어야할지 모르겠습니다
0
97
2
프라이빗 폴더를 해야 하는 이유가 모호한 것 같아요.
0
85
2
vanilla-extract 못찾는 문제
0
229
2
fetch 캐싱과 revalidate 관련
0
84
2