SSR 환경에서 React-Query에서 제공하는 메서드 prefetchQuery를 사용하여 쿼리를 prefetch할 수 있다.
해당 쿼리를 통해 데이터를 받아와야하는 컴포넌트에서도 동일한 queryKey를 사용하여 호출하면 된다.
지도 기반 웹 사이트를 제작 중이고, Client Component에서는 네이버 지도 api 연동 등의 작업이 필요하기 때문에 Server Component에서 places 데이터를 미리 받아와 성능을 개선하고자 한다.
공식 문서 Hydration-dehydrate 메서드 부분에 대한 설명이다.
page.tsx
export default async function Home() {
const queryClient = new QueryClient()
await queryClient.prefetchQuery({
queryKey: ['places'],
queryFn: getAllPlaces
})
return (
<>
<HydrationBoundary state={dehydrate(queryClient)}>
<Map/>
</HydrationBoundary>
<FloatingButton />
</>
);
}위 코드에서 @tanstack/react-query에서 제공하는 HydrationBoundary로 이를 적용할 범위를 children 자리에 넣어주었다.
prefetchQuery를 통해 queryClient 를 dehydrate 하고 queryKey에 넣어준 쿼리가 있으면 캐싱된 데이터를 반환해준다.
이후 Client Component에서 앞서 dehyrate했던 데이터를 기반으로 hydrate가 되는 방식이다.
Client Component에서는 custom hook을 생성해서 똑같이 places라는 queryKey로 데이터를 불러와서 사용해주었다.
참고자료
React-Query 공식문서
https://tanstack.com/query/latest/docs/framework/react/reference/hydration#dehydrate
Why I Still Use React Query with Next 14
https://www.youtube.com/watch?v=9kjc6SWxBIA&t=504s
