개발자

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

2024년 03월 09일조회 399

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이 적용되는 과정에 대한 원리를 정확히 알고 싶습니다.

이 질문이 도움이 되었나요?
'추천해요' 버튼을 누르면 좋은 질문이 더 많은 사람에게 노출될 수 있어요. '보충이 필요해요' 버튼을 누르면 질문자에게 질문 내용 보충을 요청하는 알림이 가요.

답변 1

포크코딩님의 프로필 사진

1.네, 틀린 말은 아닙니다. 서버가 같은 위치라는 거대한 느낌보단 같은 프로세스 안에 있다고 생각하시면 좋을듯합니다. 2. dehydrate는 hydrate시에 필요한 캐시 데이터들을 캡쳐해 두는 기능으로 알고 있습니다. hydrationboundary와 dehydrate는 자세한 내용을 생략하면 두 가지를 결정해 줍니다. - ssr을 위해 어떤 데이터를 미리 가져올 것인가 - hydrate시에 필요한 추가 정보 두 가지 기능은 ssr 과정 중 마크업에 들어갈 내용을 채워주는데 기여합니다.

지금 가입하면 모든 질문의 답변을 볼 수 있어요!

현직자들의 명쾌한 답변을 얻을 수 있어요.

또는

이미 회원이신가요?

AI 답변
커리어리 AI 봇 프로필 이미지

커리어리 AI 봇

GPT가 달아주는 답변입니다.

2024년 03월 09일

Next.js와 React Query를 사용하여 서버사이드 렌더링(SSR)을 구현할 때, 이들의 동작 원리는 다음과 같습니다. 1. Next.js에서 getServerSideProps나 getStaticProps 메서드를 사용하여 데이터를 가져오는 부분이 있습니다. 이 메서드들은 서버 측에서 실행되며, 프론트엔드가 아닙니다. 이 과정에서 prefetchQuery 등을 통해 데이터를 가져오고, QueryClient에 캐시합니다. 2. 서버 사이드에서 가져온 캐시 데이터는 dehydrate(QueryClient)를 통해 JSON 형태로 직렬화(serialized)됩니다. SSR된 HTML 문서에 병합되어 클라이언트 측으로 전송됩니다. 3. 클라이언트 측에서 HTML 문서가 로드 될 때, Hydrate 함수(HydrationBoundary) 내부에서 useHydrate(QueryClient) 훅을 사용하여 서버 사이드에서 생성한 직렬화된 상태(dehydratedState)를 다시 복구(rehydrated)합니다. 즉, 1. 첫번째 의문에 대한 답변: 네 맞습니다. next.js(또는 Node.js 기반 서버)와 react query의 캐시 데이터 위치는 같다고 보실 수 있습니다. 즉, next.js 서버가 클라이언트 역할을 하여 API 요청등의 처리 결과를 react query cache에 저장하고, 이를 다시 HTML에 심어서 프론트엔드로 보냅니다. 2. 두번째 의문에 대한 답변: 서순이 맞습니다. SSR 단계에서는 데이터를 가져와 문서 생성과정을 거치며, 이 때 서버 측의 react-query cache가 사용됩니다. 클라이언트 측에서는 해당 문서를 받아 처리하면서 dehydrate 작업을 통해 서버에서 받은 데이터를 클라이언트 측 react-query cache로 복구하는 과정이 진행됩니다. 따라서 HydrationBoundary와 dehydrate는 각각 클라이언트 측과 서버 측에서 반대의 역할을 하므로 정확하게 보아야 합니다. 서버에서는 데이터를 가져와 QueryClient에 저장하고 이를 직렬화(dehydrate)하여 HTML 문서 안에 넣어 보냅니다. 반면 클라이언트에서는 이 HTML 문서 내부의 데이터를 다시 복구(rehydration)하여 사용합니다.

목록으로

지금 가입하면 모든 질문의 답변을 볼 수 있어요!