https://univdev.page/posts/nextjs-hydration/

Hydrate가 뭔가요?

• CSR의 경우, 사용자가 페이지에 들어오고 나서 렌더링 된다.
• SSR의 경우, 서버에서 HTML 자체를 가져오고 성능은 좋으나 Element에 동적 이벤트 할당이 힘들다.
• 이걸 해결하기 위해 Hydrate가 존재합니다. Hydrate는 SSR을 통해서 가져온 DOM Element에 동적 이벤트를 할당시켜 줍니다.
• React v16에 추가된 것이였고, 근래에 Next.js와 같은 React Framework에서 이를 녹여내서 지원하고 있습니다.

Hydrate를 Next.js, React Query에서 어느 부분에서 쓰는건가요?

• Next.js에서는 CSR, SSR 둘 다 지원 중이며, SSR을 지원하는 페이지에서 React Query를 통해 가져온 것을 적용할 때 쓰입니다.