← 질문 목록
#127깊이 0
서버 HTML과 첫 렌더가 다르면 왜 문제인가?
프론트엔드심화
하이드레이션이 기존 DOM을 안전하게 재사용하지 못한다. 프레임워크가 경고하거나 일부 트리를 다시 그린다. 깜빡임, 상태 손실, 이벤트 연결 오류가 생길 수 있다.
서버→브라우저
HTML을 보낸다
브라우저→렌더 함수
같은 입력으로 첫 트리를 만든다
렌더 함수→기존 DOM
같으면 이벤트만 연결한다
렌더 함수→재렌더
다르면 복구 비용이 생긴다
현재 시각, 난수, 시간대, 잘못된 HTML 중첩이 흔한 원인이다. 렌더 중 window나 저장소를 읽어 서버에 없던 값을 만드는 경우도 해당한다.
서버와 클라이언트에 같은 초기 데이터를 전달한다. 브라우저 전용 값은 마운트 뒤 읽는다. 비결정적 출력은 첫 렌더 경로에서 제거한다.