인프런 커뮤니티 질문&답변
작성한 질문수
하이드레이션 질문 드립니다
해결된 질문
작성
·
206
·
수정됨
2
CSR에서 비어있는 HTML을 파싱할 때 id="root" 엘리먼트를 만나면 리액트 앱을 마운트(JS 실행)하는 것과
SSR에서 서버에서 pre-render되어 생성된 HTML에 JS에 연결하는 과정인 하이드레이션은 어떤 차이가 있는건가요?
CSR에서 비어있는 HTML에 JS를 연결해서 실행시키는 것도 하이드레이션 아닌가? 하는 생각이 들었는데
비어있는 HTML과 서버에서 렌더링된 HTML의 데이터 존재 여부에 따라 다른건지,
아니면 CSR도 하이드레이션 과정을 수행하는지 궁금합니다.
답변 2
2
안녕하세요, 인프런 AI 인턴입니다.
반짝반짝한 두더지님, 하이드레이션과 관련된 질문에 답변 드립니다.
하이드레이션(Hydration)은 서버 사이드 렌더링(SSR)을 사용했을 때의 개념입니다. SSR에서는 서버에서 이미 생성된 HTML을 클라이언트에 전송하고, 클라이언트는 이 HTML을 바탕으로 페이지를 빠르게 렌더링한 다음, 해당 HTML에 JavaScript가 연결되어 상호작용 가능한 애플리케이션으로 만드는 과정을 말합니다.
CSR(Client-Side Rendering)은 서버에서 비어있는 HTML을 클라이언트에 전송하고, 클라이언트 측에서 모든 JavaScript를 로딩하여 애플리케이션을 마운트하는 방식입니다. 이 경우 애플리케이션의 첫 화면이 사용자에게 보여지기까지 시간이 필요하며, 그 과정에서 ‘하이드레이션’이라는 용어를 보통 사용하지 않습니다.
그러므로, SSR과 CSR에서의 주된 차이는 서버에서 미리 렌더링된 HTML을 받느냐, 비어있는 HTML을 받고 클라이언트에서 모든 렌더링을 처리하느냐에 있으며, 하이드레이션은 특히 SSR에서 서버로부터 받은 HTML에 JavaScript가 연결되어 완전한 상호작용이 가능한 상태가 되는 과정을 가리킵니다.
CSR도 기술적으로는 자바스크립트를 붙여 인터랙티브한 애플리케이션으로 만들어내지만, 일반적으로 그 과정을 ‘하이드레이션’이라고 부르지는 않습니다.
1
안녕하세요! 좋은 질문 남겨주셨는데 답변이 늦었습니다.
저보다 먼저 답변이 달린 AI 인턴의 답변으로 이해가 되셨을지도 모르겠네요. 조금 더 이해를 돕기 위해 React 공식 문서 링크를 남겨두겠습니다. (링크) createRoot, hydrateRoot에 대한 설명을 담고 있습니다.
정리하자면 id="root" 엘리먼트를 만나면 리액트 앱을 마운트(JS 실행)하는 것은 createRoot를 사용하고 SSR에서 서버에서 pre-render되어 생성된 HTML에 JS에 연결하는 것은 hydrateRoot를 사용한다고 이해하시면 될 것 같습니다. 어떻게 보면 하이드레이션이 그리 거창하지 않은 것이라고 생각해도 좋겠네요.
좋은 질문 감사합니다! 또 다른 질문 있으면 언제든 남겨주세요.