next의 fetch기능을 적극적으로 이용하는 것보다 react-query의 hydration을 이용하는 것은 어떤가요?

[loopy-lim]

fetch의 기능을 이용하는 것도 좋지만, react-query의 prefetch기능을 이용하면, 복잡한 캐싱 전략까지 잘 할 수 있다고 생각합니다.
물론 cookie로 저장이 가능해야 하는 상황이지만, 이 또한 proxy server을 통해 해결이 가능하다고 생각합니다.

[bada308]

저도 react-query에서 제공하는 기능을 사용하는게 options을 통해 다양한 전략을 짤 수 있고, 서버 상태를 관리하는데 더 좋다고 생각합니다!

혹시 사용법은 이렇게 queryClient에 prefetchQuery를 사용하는 것이 맞나요?

function ShowDetailsButton() {
  const queryClient = useQueryClient()

  const prefetch = () => {
    queryClient.prefetchQuery({
      queryKey: ['details'],
      queryFn: getDetailsData,
      // Prefetch only fires when data is older than the staleTime,
      // so in a case like this you definitely want to set one
      staleTime: 60000,
    })
  }

  return (
    <button onMouseEnter={prefetch} onFocus={prefetch} onClick={...}>
      Show Details
    </button>
  )
}

https://tanstack.com/query/v5/docs/framework/react/guides/ssr#full-nextjs-pages-router-example

[loopy-lim]

어.... 이건 이제 v5 버전이긴 한데 (개인적으론 v5를 좋아해요) 저게 맞아요!

[baegyeong]

저는 react query를 이용하는 게 좋을 것 같아요! 물론 next의 fetch 기능을 사용해본적은 없어서 정확한 선호도를 말씀드릴 수는 없지만, 찾아보니 react query에서는 prefetchQuery,hydrate,dehyerate 함수 등을 제공하기 때문에.. next의 fetch기능을 대체 가능할 것 같습니다.