Hydration은 서버가 보낸 정적 HTML 위에 React가 이벤트 리스너, state, ref를 연결해 인터랙티브하게 만드는 과정입니다.

🔄 흐름 (SSR + Hydration)

1. 서버: renderToString / RSC 등으로 HTML 생성
2. 클라이언트: HTML 먼저 표시 (빠른 FCP)
3. JS 로드 후 React가 같은 구조로 reconcile → DOM 재생성 없이 attach
4. 이후 client routing, state는 CSR과 동일

⚠️ Hydration Mismatch

• 서버 HTML ≠ 클라이언트 첫 render → 경고, 재생성 (성능 저하)
• 흔한 원인: Date.now(), Math.random(), window, locale 차이
• 해결: useEffect에서 client-only 렌더, suppressHydrationWarning (날짜 등)

📡 React 18+ Streaming

• renderToPipeableStream: 준비된 chunk부터 flush
• Selective Hydration: 사용자 상호작용 우선 hydrate
• Next.js App Router: RSC + Client Component boundary

🔗 참고 자료

• hydrateRoot — 서버 HTML 위에 클라이언트를 연결하는 API다.
• React DOM Server — 서버에서 HTML을 생성하는 API 모음이다.
• renderToPipeableStream — 스트리밍 SSR과 Selective Hydration을 설명한다.
• renderToString — 동기 HTML 문자열 렌더링 API다.