[web] Hydration 이란?

💧 Hydration 이란?

웹 개발에서 hydration 또는 rehydration은 클라이언트 측 JavaScript가 정적 호스팅 또는 server-side rendering을 통해 전달된 정적 HTML 웹 페이지를 이벤트 핸들러를 HTML 요소에 첨부하여 동적 웹 페이지로 변환하는 기법이다.

HTML이 서버에서 미리 렌더링되기 때문에 "첫 번째 콘텐츠가 빠르게 표시"(유용한 데이터가 사용자에게 처음 표시되는 시점)되지만 클라이언트 측 JavaScript가 실행되고 이벤트 핸들러가 첨부될 때까지는 일정 시간이 걸린다.

hydration을 사용하는 프레임워크에는 Next.js 및 Nuxt.js가 있다.

❗️ 이해한 내용

Hydration 기법

1. SSR로 만들어진 정적 HTML 웹 페이지
2. JavaScript로 수분 보충 (ㅋㅋ)
3. 동적 웹 페이지로 변환

📚 참고자료

• Hydration (web development)