React Query의 데이터 fetching 방식에는 query client로 넘겨주는 방식에는 2가지가 존재합니다.

• 직접 데이터를 prefetchg하여 initialData로 넘겨주는 방식
• 서버에서 query를 prefetch한후, cache를 dehydrate하여 클라이언트로 rehydrate하는 방식

initialData

Next.js의 getStaticProps, getServerSideProps 함수를 사용하여 useQuery의 initialData라는 옵션으로

데이터를 넘겨줄수 있습니다.

export async function getStaticProps() {
	const posts = await getPosts()  
	return { props: { posts } }
}

function Posts(props) {  
	const { data } = useQuery(['posts'], getPosts, { initialData: props.posts })
  // ...
}

initialData의 방식은 사용은 간단하지만, 해당 데이터를 사용하는 컴포넌트 까지 props로 드릴링을 해야하는

비효율적인 작업이 필요합니다.

hydration

react-query는 Next.js의 서버에서 query들을 prefetch하여 query들을 queryClient에 dehydrate 하는 기능을 지원하고 있습니다. 즉 서버에서는 페이지 로드시 즉시 사용할수 있는 데이터를 미리 렌더링하게되며, query들을 hydrate할수 있게 됩니다.

// _app.jsx
import { Hydrate, QueryClient, QueryClientProvider } from '@tanstack/react-query'

export default function MyApp({ Component, pageProps }) {  
	const [queryClient] = React.useState(() => new QueryClient())
	
	return (    
		<QueryClientProvider client={queryClient}>      
			<Hydrate state={pageProps.dehydratedState}>       
				<Component {...pageProps} />      
			</Hydrate>    
		</QueryClientProvider>  
	)
}