개발자
Next.js 와 React Query SSR 네트워크 요청관련
현재 next.js 13버전과 react query를 같이 사용하고있습니다. https://tanstack.com/query/v4/docs/react/guides/ssr 공식문서에 나와있는 방법중 Hydration 방식을 사용하고있는데 서버 컴포넌트에서 prefetchQuery 를 하고 클라이언트 컴포넌트에서 useQuery 를 같은 키값으로 한다면 클라이언트 즉, 브라우저 네트워크 탭을 확인했을때 해당 요청이 네트워크 탭에서는 확인이 안되어야 정상일까요?
답변 1
서버 컴포넌트에서 prefetchQuery를 하고 받아온 데이터를 클라이언트 컴포넌트에 잘 전달했다면, 패칭이 일어나지 않는 게 맞습니다. 다만, `staleTime` 설정이 기본값인 `0`으로 되어있다면 서버에서 미리 데이터를 받아왔어도 이미 만료(stale)된 데이터로 취급되기 때문에 다시 패칭을 시도할 겁니다. 패칭이 일어나지 않게 하려면 useQuery 옵션 또는 QueryClient `defaultOptions.queries` 옵션의 `staleTime` 값을 원하는 값으로 설정해주면 됩니다. 예를 들어 `staleTime: 1000`로 설정하면 1초 동안은 데이터가 새 것(fresh)으로 취급됩니다.
LHS
작성자
멋쟁이사자처럼 프론트엔드스쿨 수학 • 2023년 09월 11일
답변 감사합니다!!! ㅎㅎ
지금 가입하면 모든 질문의 답변을 볼 수 있어요!
현직자들의 명쾌한 답변을 얻을 수 있어요.
이미 회원이신가요?
커리어리 AI 봇
GPT가 달아주는 답변입니다.
2023년 09월 08일
네, 그렇습니다. `prefetchQuery`를 사용하면 서버에서 데이터를 미리 가져옵니다(Server Side Rendering). 그 다음에 Hydration 단계에서 클라이언트는 서버에서 받은 데이터를 사용하여 구성됩니다. 따라서, 만약 클라이언트 사이드에서 `useQuery`가 동일한 키로 호출되면, React Query는 이미 존재하는 데이터(서버에서 미리 가져온)를 사용해야 하므로, 새롭게 네트워크 요청을 보내지 않습니다. 이 과정은 브라우저의 네트워크 탭에서 확인할 수 없습니다. 단, 이는 캐싱된 데이터가 유효한 상태일 때만 해당하며 (React Query가 자동으로 처리), 만약 데이터가 캐시에서 무효화된 경우 `useQuery`는 다시 네트워크 요청을 보냅니다. 이 경우에만 네트워크 탭에서 해당 요청을 볼 수 있습니다. 이것이 왜 중요한지 생각해보면, 클라이언트 사이드 rendering과 비교했을 때 SSR은 초기 페이지 로드 시간을 줄여주고 SEO 최적화에 도움을 줍니다. 이러한 방식은 특히 user-centric 개발에 중요하며 사용자 경험을 향상시키기 위한 한 가지 방법입니다.
지금 가입하면 모든 질문의 답변을 볼 수 있어요!