On the client (first load)
URL을 직접 열거나 새로고침해서 first load를 체험할 수 있는 서브앱입니다. mode를 바꿔가며 HTML preview, reconcile, hydration 단계 지표를 비교해보세요.
파일 구조
on-the-client-first-load/
├── page.tsx
├── _components/
│ └── HydrationProbe.tsx
└── demo/
└── [mode]/
└── page.tsx핵심 파일 코드
// HydrationProbe.tsx
'use client'
const [clickCount, setClickCount] = useState(0)
<button onClick={() => setClickCount((v) => v + 1)}>
Client 버튼 클릭 ({clickCount})
</button>