인프런 커뮤니티 질문&답변

암만 찾아봐도 이해가 안되는 부분이 있습니다.

리액트 쿼리의 데이터 프리패치에 대한 질문입니다.

제가 이해한 매커니즘은

1. 사용자가 페이지에 접속한다.

2. 리액트 쿼리 프리패치 코드를 가진 프론트서버에서 서버측으로 데이터 요청을 보낸다.

3. 데이터를 response받은 프론트서버에선 데이터를 html문서에 포함시켜 완성된 웹페이지를 서버에서 렌더링한다.

4. 완성된 웹을 사용자에게 전해주고, 프리패치된 데이터는 하이드레이션 시켜 캐시시킨다.(데이터를 사용자측면에서 재사용하기 위해)

이렇게 이해하는게 맞나요..?서버에서 데이터를 가지고 ssr을해서 사용자에게 보내주고, 그 데이터를 또 캐싱시킨다.? 그리고 하이드레이션 바운더리를 설정하는 위치에대한 규칙이 있나요? 어차피 하이드레이션 시키면 프로바이더안에서는 다쓸수있다면 모든 데이터관련 코드를 최상단 레이아웃에서 다 하이드레이션 시켜도 되는부분인가요?(물론 관심사 분리를 위해선 나누는게 좋을법하지만요)

그리고 리액트 쿼리에서의 하이드레이션과 next.js에서 ssr된 웹을 client에 js번들과함께보내주며 동적인 웹을만들기위해 하이드레이션 시킨다는 다른개념이다. 맞나요..?