내일배움캠프

230818 React Hydration

Neda 2023. 8. 18. 20:20

230818 React Hydration

SSR을 사용하면 정적인 HTML 페이지를 서버에서 렌더링할 수 있다. 하지만 이벤트와 같은 상호작용을 할 수 없는 정적인 페이지일 뿐이다.이때 서버에서는 상호작용을 위한 자바스크립트 파일을 같이 내려 보낸다.  클라이언트에서는 내려받은 정적인 페이지에 상호작용을 추가하는 Hydration을 수행한다. 

 

Hydration

서버에서 렌더링된 정적인 HTML 파일을 클라이언트에서 상태와 상호작용을 추가하는 단계

처음 한 번만 수행되고, 이후로는 다시 Hydration하지 않고 클라이언트에서 상태를 통해 관리

장점: 

서버에서 HTML을 렌더링하여 페이지 로딩 시간을 줄일 수 있다

SSR을 사용하여 SEO 최적화가 유리하다