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 함정
 
 
 
 
웹 렌더링 | Web | Google Developers
개발자로서 우리는 종종 애플리케이션의 전체 아키텍처에 영향을 미칠 의사 결정을 하곤 합니다. 웹 개발자가 하는 가장 핵심적인 결정 중 하나는 애플리케이션에서 로직와 렌더링을 구현하는 것입니다. 이는 생각보다 어려울 수 있습니다. 웹 사이트를 구축하는 데는 여러 가지 방법이 있으니까요. 이 영역에 대한 우리의 이해도는 지난 몇 년 동안 Chrome에서 대형 사이트들을 상담하며 깊어졌습니다.
웹 렌더링 | Web | Google Developers
hydrate, hydration의 의미?
(Re)hydration 이라는 용어는 주로 두가지 상황에서 쓰입니다. 리액트가 정적으로 렌더링된 (SSR 또는 pre-rendered) HTML 컨텐츠로부터 컴포넌트 트리를 재구성함 마찬가지로 정적으로 Persist된 리덕스 스토어 등을 런타임 상태로 재구성함 어감에서 할 수 있듯이 동적이였던 무언가를 정적인 상태로 저장해두었을 때, 이를 다시 원상태로 돌리는 행위를 뜻합니다.
hydrate, hydration의 의미?
 
 

Recommendations