서버 HTML과 첫 렌더가 다르면 왜 문제인가?

하이드레이션이 기존 DOM을 안전하게 재사용하지 못한다. 프레임워크가 경고하거나 일부 트리를 다시 그린다. 깜빡임, 상태 손실, 이벤트 연결 오류가 생길 수 있다.

현재 시각, 난수, 시간대, 잘못된 HTML 중첩이 흔한 원인이다. 렌더 중 window나 저장소를 읽어 서버에 없던 값을 만드는 경우도 해당한다.

서버와 클라이언트에 같은 초기 데이터를 전달한다. 브라우저 전용 값은 마운트 뒤 읽는다. 비결정적 출력은 첫 렌더 경로에서 제거한다.