Mismatches and Boundaries

서버와 클라이언트가 다른 텍스트를 그렸을 때 화면에 남는 것은?

• 클라이언트가 그린 값 — 나중 것이 이긴다
• 서버가 그린 값 — 하이드레이션은 텍스트를 고치지 않는다
• 빈 문자열 — 어느 쪽도 믿을 수 없으므로 지운다
• 둘이 나란히 — 브라우저가 중복 노드를 만든다

React 가 useId 를 따로 둔 이유로 문서가 드는 것은?

• id 문자열이 짧아 DOM 크기가 줄기 때문에
• 전역 카운터는 여러 컴포넌트에서 겹칠 수 있기 때문에
• 접근성 속성은 숫자만 받기 때문에
• 클라이언트가 하이드레이션하는 순서가 서버 HTML 이 나온 순서와 같다고 보장할 수 없기 때문에

비교기가 자식 수가 다른 자리에서 더 내려가면 무슨 일이 생기나?

• 짝이 아닌 노드끼리 견줘 불일치가 쏟아지고 진짜 원인이 묻힌다
• 무한 재귀에 빠져 스택이 넘친다
• 남는 자식이 조용히 무시돼 불일치를 놓친다
• 경로 문자열이 어긋나 중복 보고가 생긴다

suppressHydrationWarning 에 대해 React 문서가 적는 제약은?

• 서버 컴포넌트에서만 쓸 수 있다
• 한 겹만 통하는 탈출구이고 남용하지 말아야 한다
• 텍스트에는 못 쓰고 속성에만 쓸 수 있다
• 개발 빌드에서만 동작하고 배포본에서는 무시된다

경계 밖에서 난 하이드레이션 불일치의 비용은?

• 그 노드 하나만 다시 그린다
• 가장 가까운 부모 요소만 다시 그린다
• 페이지 전체를 다시 그리게 만든다
• 다음 상태 변경까지 아무 비용도 없다

서버는 UTC 로, 브라우저는 사용자 시간대로 날짜를 그릴 때 옳은 처리는?

• 시간대와 로캘을 옵션으로 명시해 두 쪽 결과를 같게 만든다
• 서버 렌더에서 날짜를 빼고 클라이언트에서만 그린다
• 날짜 문자열을 비교에서 제외하도록 비교기를 고친다
• 서버의 시스템 시간대를 사용자 시간대로 바꾼다