Next.js React-query 관련해서 질문있습니다 ㅜㅜ

Question

안녕하세요 Next.js를 공부하고있는데 현재 페이지 내에서 useQuery 커스텀훅으로 데이터를 가져오고 있는데

SSR 형식으로 getServersideProps를 통해 데이터 패칭을 가져올려고 바꿀려고 합니다 !

1. getSersideProps 쪽에서도 useQuery 커스텀훅을 사용할수 있을까요..?

2. 혹시 안된다면 데이터 받아오는것을 getServersideProps쪽에서 다 하면 useQuery 커스텀훅은 따로 쓸 필요가 없을까요?! 만약 쓴다면 어떠한 경우에 써야 될까요?

질문이 난잡해서 죄송합니다😭😭

정재용 · Answer

1. useQuery는 CSR로 써주시는게 맞습니다. 
2. SSR 형태로 사용하고싶으시다면, 두가지 방법이 있을 수 있는데, 
첫번째는 getServerSideProps에서 리턴받은 결과값을 props으로 전달하고 useQuery의 initialData로 넣어주는 방식입니다.

두번째는 hydration을 이용하는 방법인데, SSR에서 패칭한 데이터를 QueryClient에 담아 클라이언트로 내려주는 방식입니다.

아마 말씀해주신 내용으로 봤을땐 두번째 방법이, 더 적합해 보이네요.
자세한 내용은 아래의 공식문서를 참고해보시면 좋을듯 합니다.
(https://tanstack.com/query/v4/docs/react/guides/ssr)