Hydrate

  • 게시일
    리액트와 Next.js에서 "hydrate"는 서버에서 렌더링된 HTML 마크업에 기반하여 클라이언트 측에서 자바스크립트 이벤트와 상태를 연결하는 과정을 말합니다. 이를 통해 초기 로딩 시 클라이언트에서 즉시 상호작용이 가능하고, 이후에는 일반적인 리액트 애플리케이션처럼 동작할 수 있습니다. 'next.js 프로젝트를 다루다 보면 'hydration failed because the initial ui does not match what was rendered on the server'와 같은 에러를 발견하게 됩니다. 이와 관련하여 react와 next.js에서 hydrate의 개념에 대해 좀 더 자세한 정리를 합니다.