본 포스팅은 Next.js환경에서 적용되는 ReactQuery사용법을 담고 있습니다.
기본 사용법과 설치법은 여기를 참고해주세요.

Prefetching

공식문서를 보면 ReactQuery는 두가지의 방법으로 prefetching을 지원합니다.

1. initialData
2. dehydrate - hydrate

Using InitailData

첫번째 사용방법은 다음과 같습니다.

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

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

위 사용법은 직관적이고 간단하지만 getStaticProps로 마크업 할 데이터를 컴포넌트까지 props로 넘겨줘야 한다는 번거로움이 존재합니다.
데이터를 마크업만 하면 된다면 useQuery를 안쓰는게 더 깔끔 할 듯하다.

Using hydration

두번째 사용방법은 다음과 같습니다.

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

위 처럼 설정한 후 다음과 같이 prefetch를 적용 할 수 있습니다.

// pages/posts.jsx
import { dehydrate, QueryClient, useQuery } from '@tanstack/react-query';

export async function getStaticProps() {
	const queryClient = new QueryClient()
	
	await queryClient.prefetchQuery('posts', getPosts)

	return {
		props: {
			dehydratedState: dehydrate(queryClient),
		},
	}
}

function Posts() {
	// 이 useQuery는 "Posts" 페이지에 대한 더 깊은 자식 요소에서 사용될 수도 있으며, data는 어느 쪽에서 사용되든 즉시 사용할 수 있다.
	const { data } = useQuery(['posts'], getPosts)

	// 이 query는 서버에서 prefetch된 것이 아니며 클라이언트에서 시작할 때까지 fetch하지 않는다. 
	// 두 가지 패턴(서버에서 prefetch, 클라이언트에서 fetch)은 혼합될 수 있다.
	const { data: otherData } = useQuery(['posts-2'], getPosts)
	
	// ...
}

따로 props를 넘겨 받지 않아도 queryClient.prefetchQuery의 queryKey를 통해 페이지 로드시 데이터 마크업이 가능합니다.

💡 hydrate & dehydrate
ReactDom에서 정적인 페이지(HTML)을 먼저 랜더링하고 JS코드가 모두 로드되면 HTML에 이벤트 핸들링등 JS코드를 적용하여 동적인 페이지를 만드는 작업을 hydreate라고 합니다. dehydrate는 hydreate로 공급될 cache에 대한 고정된 표현을 생성합니다.