[React & Next] Hydration과 Bundling

Hydration

서버가 미리 만든 HTML에 브라우저에서 React의 JS 기능을 붙이는 과정
이미 렌더링 된 HTML에 useState, useEffect, onClick 등의 기능을 살리는 것

💡 발생

• SSR이나 SSG처럼 HTML이 먼저 도착한 경우
• 브라우저는 해당 HTML과 React의 가상 DOM을 동기화함

🤸‍♀️ 예시

// 서버 렌더링된 HTML
<h1>타이틀</h1>
<button>버튼</button>

// 브라우저에서 JS 번들이 로드됨
→ React가 해당 HTML과 가상 DOM을 연결 (hydration)
→ onClick 이벤트, useState 등 기능이 활성화됨

---

Bundling

여러 JS 파일, 모듈들을 하나로 묶어서 단일 JS 파일로 만드는 작업
JS 파일을 최소화하여 최적화 Webpack, Vite, Turbopack 등으로 처리

💡 발생

• 앱 빌드 시 main.js 번들 파일 생성

🤸‍♀️ 예시

// src/components/A.tsx
// src/components/B.tsx

→ 번들링 후 여러 JS 파일(예: main.js, chunk.js 등)로 묶임