NextJS Hydration
정의
Hydration이란?
정적 호스팅 혹은 SSR을 통해 받은 HTML 웹페이지를 동적인 웹페이지로 만드는 과정
Hydration Process
- 사용자가 페이지를 요청
- 브라우저는 서버에서 HTML 문서를 받아와 정적 페이지를 보여줌
- 이와 동시에 Background에서는 HTML을 사용하여 React Component를 초기화
- 생성된 React Component를 브라우저에 로드하여 동적 페이지를 보여줌
memo
Hydration 으로 HTML이 React Component로 교체되어, 사용자가 첫 화면부터 연속적이고 부드럽게 Rendering 되는 동적 웹페이지를 사용할 수 있다.
memo
Hydration이 완료 되기 전에도 사용자는 정적 웹 페이지에서 컨텐츠를 확인 할 수 있다.
댓글남기기