#reactquery

Next app 라우터와 react query애서 ssr이 적용되는 원리에 대해서 궁금합니다

react query와 ssr을 같이 사용하는 경우 queryClient에서 prefetch 한 다음 해당 queryClient를 dehydate한 dehydate(queryClient)를 HydrationBoundary에 전달해 주면 HydrationBoundary 하위 컴포넌트에서 prefetch 된 캐시 데이터를 queryKey를 통해 접근 할 수 있고 이를 통해 ssr 이 구현된다는 것 까진 이해 하였습니다. 하지만 이 과정에서 1. useQuery로 가져온 캐시 데이터를 사용하는 부분은 컴포넌트가 "use client"인데도 html 문서에 데이터가 입력돼서 넘어옵니다. 그렇다면 next가 ssr을 구현하는 서버와 reactQuery의 캐시 데이터가 존재하는 서버가 같은 위치에 있어서 html 문서에 캐시 데이터가 들어갈 수 있는것인가? 2. 문서 생성과정은 캐시된 데이터를 가져와서 생성하는 것으로 추측됩니다. dehydrate는 문서 안에 있는 데이터를 reactQuery의 데이터로 만드는 과정이라 들었는데 서순이 이상한거 아닌가? 라는 의문이 들어서 HydrationBoundary 와 dehydate를 통해 ssr이 적용되는 과정에 대한 원리를 정확히 알고 싶습니다.

useSuspenseQuery 와 ErrorBoundary 궁금증입니다!

ReactQuery v5 와 ErrorBoundary를 공부하고 있습니다. 학습 과정에서 궁금한 점이 있는데용 Query 데이터를 가져올 때, 네트워크 오류 발생 시 오류 오버레이 UI가 렌더링되면서 uncaught errors 라고 메세지가 나오네요. 그러나 ErrorBoundary의 fallback UI는 렌더링이 제대로 됩니다. uncaught errors라면 ErrorBoundary에서 에러를 캐치하지 못한 걸까요? 그러기엔 fallback UI가 렌더링되니 오류를 잡은건가 헷갈립니다. 혹은 개발 환경에서는 오류 오버레이 UI가 렌더링되는 것이 정상적인건가요? 열심히 찾아봤는데 잘 나오지 않는 것같아 질문드립니다...!

(SSR 새로고침 문제)NextJS page에서 redux persist gate 설정하면 Client컴포넌트로 인식되는 문제

NextJS Pages Router에서 유저 데이터를 상태관리하기위해 redux를 사용했으나, 새로고침 시 데이터가 날라가는 문제를 해결하기 위해 persist gate를 사용했습니다. 하지만 redux persist gate를 사용하면 클라이언트 컴포넌트로 인지되는 문제가 있습니다. 궁금한 것 1) persist gate를 잘못써서 생긴 문제일까요? 아님 persist gate를 쓰면 안될까요? 2) 해결 방법으로 생각 해본 것은, "persist gate를 사용하지 않고 매 새로고침 시 저장되어있는 local storage에서 데이터를 새로 가져온다." 입니다. 3) ssr시 상태관리 새로고침 다른 방법으로 해결해본 경험 있으시면 아무렇게나 대답해주시면 감사하겠습니다!!! ----------------------------------------------- 문제의 코드 위치: https://github.com/bbookng/zippyziggy-v2/blob/main/frontend/zippy-ziggy/src/pages/_app.tsx 문제의 코드: import GlobalStyle from '@/styles/Global.style'; import useDarkMode from '@/hooks/useDarkMode'; import { media } from '@/styles/media'; import { darkTheme, lightTheme } from '@/styles/theme'; import type { AppProps } from 'next/app'; import { ThemeProvider, createGlobalStyle } from 'styled-components'; import normalize from 'styled-normalize'; import '@/styles/index.css'; import { QueryClient, QueryClientProvider } from '@tanstack/react-query'; import AppLayout from '@/layout/AppLayout'; import store, { persistor } from '@/core/store'; import { PersistGate } from 'redux-persist/integration/react'; import { Provider } from 'react-redux'; import { ReactQueryDevtools } from '@tanstack/react-query-devtools'; import 'toastify-js/src/toastify.css'; import { ToastContainer } from 'react-toastify'; import 'react-toastify/dist/ReactToastify.css'; import DefaultHead from '@/components/Head/DefaultHead'; import Construction from './construction'; const queryClient = new QueryClient({ defaultOptions: { queries: { refetchOnWindowFocus: false, // default: true }, }, }); function App({ Component, pageProps }: AppProps) { const { colorTheme, toggleTheme } = useDarkMode(); return ( <Provider store={store}> <PersistGate persistor={persistor}> <QueryClientProvider client={queryClient}> <ThemeProvider theme={colorTheme === 'dark' ? darkTheme : lightTheme}> <AppLayout toggleTheme={toggleTheme}> <Component {...pageProps} /> ... </AppLayout> </ThemeProvider> <ReactQueryDevtools initialIsOpen={false} /> </QueryClientProvider> </PersistGate> </Provider> ); } export default App;

useQuery 응답 순서 문제 (query key의 일부가 다른 경우)

useQuery에서 API 호출에 필요한 parameter 가 달라지는 경우에 query key의 일부를 변경하여 재호출을 하는 것으로 알고 있는데요. useQuery({ queryKey: [ reactQueryKeys.search, searchParams, ], queryFn: () => requestSearch( searchParams, ), }) (여기서 searchParams 가 상태 값이어서 달라지는 값입니다.) parameter만 다르고 찌르는 곳이 같은 API 요청을 2번 연속으로 한다고 했을 때, 첫 번째 요청과 두 번째 요청의 결과가 요청한 순서대로 오는 것을 보장할 수 있을까요? 제가 느끼기에는 첫 번째 요청과 두 번째 요청이 서로 독립적으로 동작한다고 느껴졌거든요. 만약 응답 순서를 보정하지 않는다면 보장할 수 있는 방법이 있을지 궁금합니다. 검색어 자동완성이나, 지도를 움직일 때마다 API 요청을 하는 경우 응답 순서 문제가 발생할 수 있을 것 같아서요.

ReactQuery 사용 중에 url이 변경되는 경우, 자동으로 리페칭되나요?

회사에서 react query를 도입하는 중입니다. 기존 코드에서는 서로 다른 페이지에서 같은 api를 지속적으로 요청하여 데이터를 받아오고 있습니다. 받아오는 데이터가 변경이 거의 없는 데이터라서, react-query의 캐싱기능을 사용하여, 불필요한 api 요청을 방지하려고 했습니다. 그런데 개발자 도구 네트워크탭에서 확인해보니, 페이지 url 경로가 변경될 때마다, 데이터가 fresh 상태임에도 불구하고 계속하여 데이터를 요청하는 api를 보내고 있습니다. staleTime도 60분으로 설정했고, 데이터가 fresh 상태임도 확인해보았습니다. 혹시 옵션값과는 상관없이, url이 변경되었을 경우(ex localhost:3000/main -> /setting) 데이터 리페칭이 자동으로 일어나는 건가요? url이 변경되었을 때, 데이터가 fresh 상태라면 리페칭을 하지 않게 하고 싶습니다.