Hydration 이란?
Hydration의 사전적인 의미는 수분 공급이지만, Nuxt에서는 서버에서 렌더링된 정적 HTML을 클라이언트 측에서 동적으로 연결하여 상호작용이 가능하게 만드는 과정을 말합니다. 그렇다면 정적 HTML을 내려받아 사용자의 상호작용에 의해 HTMl의 일부가 변경될 수 있다는 의미인데, 이를 유니버셜 렌더링이라고 표현합니다.
Universal Rendering
유니버셜렌더링은 초기 렌더링 시 완전한 HTMl을 내려주기 때문에 클라이언트에서는 렌더링할 필요가 없어 초기 세팅이 빠릅니다. 이후의 요청에 대해서는 클라이언트에서 렌더링을 수행합니다. 서버에서 마크업을 완성시켜 내려주었는데, 클라이언트 단에서 어떻게 HTML 구조를 변환시켜 노출하는 것일까요?
바로 클라이언트에서 Hydration 과정을 거쳤기 때문입니다. 정적인 HTML이 동적인 HTML로 바뀐 것입니다.
어떻게 바꿀까?
Nuxt는 서버에서 페이지를 렌더링하고, HTML 파일을 생성해 사용자에게 전달합니다. 그럼 Vue의 클라이언트 측 Javascript 코드가 동작하여 정적 HTML과 Vue 컴포넌트의 상태를 동기화합니다.
엄밀히 말해서 위 동기화 과정이 Htdration입니다. Hydration이 완료되면 사용자는 버튼 클릭, 폼 제출 등의 동적인 상호작용을 정상적으로 수행할 수 있게 됩니다.
정리하자면 클라이언트에서 SSR 앱을 탑재하게 되면 클라이언트는 미리 렌더링이 되어있다고 가정하고 새 돔 노드를 마운트하는 대신 하이드레이트를 수행하는 것입니다.
Hydration과 관련된 문제점
- Hydration 비용: Hydration 과정에서 클라이언트 측 JavaScript가 전체 페이지를 다시 분석하고 연결해야 하기 때문에, 페이지가 매우 복잡하거나 큰 경우 성능 저하가 발생할 수 있습니다.
- 불일치 문제: 서버에서 생성된 HTML과 클라이언트에서 Hydration 시 Vue 컴포넌트의 상태가 일치하지 않는 경우, 콘솔에 경고가 뜨거나 렌더링 문제가 발생할 수 있습니다. 이를 Hydration 불일치라고 하며, 서버와 클라이언트가 동일한 상태를 유지하는 것이 중요합니다.
Hydration attribute mismatch on 에러란?
서버에서 미리 렌더링된 DOM의 구조와 클라이언트 측 앱의 예상 출력이 일치하지 않으면 발생하는 에러입니다. Vue 코드를 이리저리 수정하다가 저장 버튼을 눌렀을 때 쉽게 마주치게 되는 에러입니다.
뷰에서 하이드레이션 불일치가 발생하면 클라이언트 측 상태와 일치하도록 사전 렌더링된 돔을 자동으로 복구하고 조정하려고 시도하는데, 이로인해 잘못된 돔이 지워지고 새 노드가 마운트되어 렌더링 성능이 저하될 수 있지만 대부분의 경우 정상적으로는 동작합니다.
