Next와 React-query의 prefetch에 대해

Question

안녕하세요 !

Next14 버전과 tanstack-qeury를 이용해 프로젝트를 진행하던 도중 궁금한 점이 생겨 질문드립니다.

Next의 서버 컴포넌트에서 data를 prefetching 하여 사용하려면 다음과 같은 단계를 밟아야 하는 것으로 알고 있습니다.

1. 서버 컴포넌트에서 queryClient.prefetchQuery를 사용해 데이터를 불러오고 이를 dehydrate하여 HydrationBoundary 내에 state로 넘겨준다.

2. 데이터를 사용하는 컴포넌트에서 useQuery로 동일한 데이터를 불러오면 해당 데이터는 prefetch 된 상태로 넘어와 이를 사용한다.

현재 이를 토대로 아래 예시코드와 같이 작성하여 사용중입니다.

이 때 하위 컴포넌트에서 prefetch한 데이터를 사용하려면 useQuery를 써야하기에, use client 를 사용해야하고, 그렇게 되면 그 하위 컴포넌트도 전부 Client Boundary에 들어오게 되는 것으로 알고있는데, 그럼 Next를 사용하며 얻을 수 있는 장점이 줄어들지 않나 ? 라는 의문이 생겼습니다.

제가 사용법을 잘못 알고있다거나 Next의 개념에 대해 부족한걸까요 ?

또, HydrationBoundary로 감싸지 않고 queryClient.getQueryData를 이용해 직접 데이터를 가져와 이를 props로 전달해도 기능은 정상적으로 작동하는데, 이 둘의 차이점이 정확히 무엇인가요 ?

허니 · Answer

클라이언트 컴포넌트도 서버에서 초기 렌더링이 수행될 수 있습니다 1. 전체 페이지 로드 시 (ex. 첫 페이지 로드, 새로고침) prefetch를 사용 시 -> data를 서버에서 fetching하여 data를 가진 상태의 컴포넌트의 초기 html을 서버에서 렌더링합니다 prefetch를 사용하지 않을 시 -> 서버에서는 아직 data가 없으므로 데이터가 없을 때의 fallback ex. if(isLoading) return

loading...

을 표시합니다 2. 후속 탐색 시 (ex. Link를 통한 페이지 이동) 클라이언트 구성 요소는 클라이언트에서 완전히 렌더링 됩니다. https://nextjs.org/docs/app/building-your-application/rendering/client-components prefetch와 HydrationBoundary을 사용하면 서버에서 데이터를 fetching하고 클라이언트의 queryclient에 바로 전달할 수 있어 초기 렌더링 시 깜박임이 생기지 않습니다. 클라이언트 컴포넌트에서는 서버에서 Hydration을 했는지 여부를 알지 못해도 되고 그대로 useQuery와 같은 훅을 사용하면 됩니다 Hydration 대신 props를 통해 데이터를 전달할 수도 있습니다. 하지만 tanstack query가 필요한 컴포넌트는 지속적으로 데이터 관리가 필요할 가능성이 크다고 볼 수 있습니다. 따라서 해당 컴포넌트는 클라이언트 컴포넌트로서 props로 초기 상태를 전달 받고 훅을 통해 지속적으로 상태 관리를 해야 합니다. 또한 데이터가 필요한 위치까지 계속 내려줘야 하는 props drilling가 발생할 수 있습니다. 이와 관련해서는 공식 문서에서 자세히 찾아볼 수 있습니다 https://tanstack.com/query/latest/docs/framework/react/guides/ssr#get-started-fast-with-initialdata