React Rehydration

Creator
Creator
Seonglae ChoSeonglae Cho
Created
Created
2021 Mar 1 10:54
Editor
Edited
Edited
2021 Nov 19 8:52
Refs
Refs
JS가 실행되면서 리액트가 정적인 HTML과 store를 동적인 리액트 컴포넌트 트리와 store로 변환하는 과정
hydrate stores
notion image
notion image
클라이언트가 서버에서 렌더링 한 HTML의 DOM 트리와 데이터를 재사용하도록 자바 스크립트 뷰를 부팅
server에서 초기 state를 구성했기 때문에 client에서 동기화 하는 로직
Rehydration 문제: 하나의 앱 두 배의 비용
클라이언트 측 렌더링에서 필요한 초기 데이터가 준비 되지 않을 때 서버 렌더링 된 DOM 트리가 손상되어 재구축되는 가장 일반적인 SSR Rehydration 함정
 
 
 
 
 
 

Recommendations