React 18 useDeferredValue 심화: 검색 자동완성에서 디바운싱을 제거하는 이유

서버에서 가져온 데이터, 어떻게 클라이언트에서도 그대로 쓸까요?

"새로고침할 때마다 데이터가 깜빡거리나요?"
Next.js 같은 서버 사이드 렌더링(SSR) 환경을 쓰는데도, 화면이 뜰 때 '로딩 중...'이 보인다면 뭔가 잘못된 것입니다.
서버에서 힘들게 데이터를 가져왔는데, 브라우저가 그걸 모르고 다시 가져오려 하기 때문이죠.
이 비효율을 해결하는 핵심 열쇠, 바로 Hydration(수분 공급)에 대해 아주 쉽게 알려드립니다.

많은 프론트엔드 개발자들이 React Query를 SSR과 함께 사용할 때 데이터 동기화 문제로 골머리를 앓습니다.
오늘 이 글을 통해 서버의 상태를 클라이언트에 '물 흐르듯' 전달하는 전략을 마스터해 봅시다.

---

🤔 1. Dehydration & Hydration이 뭔가요?

용어가 너무 어렵죠? 쉬운 비유로 이해해 봅시다.
우리가 캠핑을 간다고 상상해 보겠습니다.

🍜 컵라면 비유 (The Cup Noodle Analogy)

• 1. 서버 (공장):
  맛있는 라면(데이터)을 끓여서 수분을 쫙 뺍니다. 이를 Dehydration(건조/수분 제거)이라고 합니다.
  이렇게 하면 가볍게 포장해서 브라우저로 배송하기 좋습니다.
  
• 2. 이동 (HTML 전송):
  건조된 라면(직렬화된 JSON 데이터)이 HTML에 담겨 브라우저로 날아갑니다.
  
• 3. 클라이언트 (브라우저):
  브라우저는 받자마자 뜨거운 물을 부어 먹을 수 있는 상태로 만듭니다.
  이것이 바로 Hydration(수분 공급)입니다.
  

즉, 서버에서 미리 가져온 데이터를 "얼려두었다가" 클라이언트에서 "녹여서" 바로 사용하는 기술입니다.

---

⚔️ 2. 두 가지 핵심 전략: initialData vs Hydration

React Query에서 SSR을 구현하는 방법은 크게 두 가지가 있습니다.
상황에 맞춰 적절한 방법을 선택하는 것이 중요합니다.

전략 A: `initialData` 사용하기

가장 단순한 방법입니다. 서버에서 데이터를 받아 컴포넌트의 props로 넘겨주고, 그걸 useQuery의 초기값으로 넣는 방식입니다.

👍 장점: 구현이 매우 직관적이고 쉽습니다.
👎 단점: 컴포넌트 깊이가 깊어지면 데이터 전달(Prop Drilling)이 힘듭니다.

전략 B: Hydration API 사용하기 (권장)

Next.js의 dehydrate와 HydrationBoundary를 사용하는 표준 방식입니다.
React Query가 데이터를 전역적으로 관리해 주므로 Props를 계속 넘겨줄 필요가 없습니다.

구분	initialData 방식	Hydration 방식 (추천)
복잡도	낮음 (쉬움)	중간 (설정 필요)
데이터 관리	컴포넌트 단위	전역 관리 (Cache)
사용처	단순한 페이지	복잡한 앱 / 깊은 구조

---

💻 3. Hydration 패턴 실전 구현 (Next.js 14 App Router 기준)

최신 Next.js 환경에서 가장 권장되는 서버 컴포넌트(Server Component)에서의 구현 흐름을 보여드리겠습니다.

// app/posts/page.tsx (서버 컴포넌트)

import { dehydrate, HydrationBoundary, QueryClient } from '@tanstack/react-query';

export default async function PostsPage() {
  // 1. 서버 전용 QueryClient 생성
  const queryClient = new QueryClient();

  // 2. 서버에서 미리 데이터 가져오기 (prefetch)
  await queryClient.prefetchQuery({
    queryKey: ['posts'],
    queryFn: getPosts,
  });

  return (
    // 3. 데이터를 직렬화(Dehydrate)하여 클라이언트로 전달
    <HydrationBoundary state={dehydrate(queryClient)}>
      <PostsList />
    </HydrationBoundary>
  );
}

⚠️ 주의사항: makeQueryClient

서버 컴포넌트에서는 요청마다 새로운 QueryClient를 생성해야 합니다.
싱글톤(전역 변수)으로 만들면 여러 사용자의 데이터가 섞이는 끔찍한 사고가 발생할 수 있습니다!

---

🎓 마치며

Hydration은 처음엔 복잡해 보이지만, 한 번 세팅해 두면 SEO 점수와 사용자 경험(UX) 두 마리 토끼를 모두 잡을 수 있는 강력한 무기입니다.

이제 '로딩 중' 없는 쾌적한 웹사이트를 만들 준비가 되셨나요?

여러분의 데이터가 서버에서 클라이언트까지 안전하게 배송되길 응원합니다!