Next app 라우터와 react query애서 ssr이 적용되는 원리에 대해서 궁금합니다

Question

react query와 ssr을 같이 사용하는 경우 
queryClient에서 prefetch 한 다음
해당  queryClient를 dehydate한 dehydate(queryClient)를 
HydrationBoundary에 전달해 주면
HydrationBoundary 하위 컴포넌트에서 prefetch 된 캐시 데이터를 queryKey를 통해 접근 할 수 있고
이를 통해 ssr 이 구현된다는 것 까진 이해 하였습니다.

하지만 이 과정에서
1. useQuery로 가져온 캐시 데이터를 사용하는 부분은 컴포넌트가 use client인데도 html 문서에 데이터가 입력돼서 넘어옵니다. 그렇다면 next가 ssr을 구현하는 서버와 reactQuery의 캐시 데이터가 존재하는 서버가 같은 위치에 있어서 html 문서에 캐시 데이터가 들어갈 수 있는것인가? 
2. 문서 생성과정은 캐시된 데이터를 가져와서 생성하는 것으로 추측됩니다. dehydrate는 문서 안에 있는 데이터를 reactQuery의 데이터로 만드는 과정이라 들었는데 서순이 이상한거 아닌가?

라는 의문이 들어서
HydrationBoundary 와 dehydate를 통해 ssr이 적용되는 과정에 대한 원리를 정확히 알고 싶습니다.

포크코딩 · Answer

1.네, 틀린 말은 아닙니다. 서버가 같은 위치라는 거대한 느낌보단 같은 프로세스 안에 있다고 생각하시면 좋을듯합니다.

2. dehydrate는 hydrate시에 필요한 캐시 데이터들을 캡쳐해 두는 기능으로 알고 있습니다.

hydrationboundary와 dehydrate는 자세한 내용을 생략하면 두 가지를 결정해 줍니다. 
- ssr을 위해 어떤 데이터를 미리 가져올 것인가
- hydrate시에 필요한 추가 정보

두 가지 기능은 ssr 과정 중 마크업에 들어갈 내용을 채워주는데 기여합니다.