인프런 커뮤니티 질문&답변
작성한 질문수
Hydration 개념.
해결된 질문
작성
·
696
·
수정됨
1
질문 가이드 📖
강의에서 이해가 안가는 부분이 있나요?
강사님께서 hydration이라고 언급하셨는데 정확히 어떠한 개념인지 설명해주실 수 있나요??
Next.js 공부 1년동안 했는데도 개념이 모호하네요.. 😅
좋은 퀄리티의 강의 감사합니다.
답변 2
7
안녕하세요! 질문 남겨주시고 강의 봐주셔서 감사합니다. Hydration을 제가 자세히 설명하지 않아서 이해하기 어려우셨을 것 같아요.
Hydration의 경우 우리말로 '수화'라고 표현해요. '물을 줘서 촉촉하게 만든다' 정도의 의미를 담고 있습니다.
Next.js를 하는데 물이 왜 나오고 촉촉하게 만든다는 게 무슨 의미인가 싶으실 거에요. 쉽게 이해하게 만드려고 만든 표현인데 오히려 어렵게 느껴지죠.
Next.js에서 지원하는 Pre-rendering은 사전 렌더링이라고 불러요. 클라이언트(브라우저)가 코드를 해석하기 전에 미리 렌더링해두는 것이죠. 그 중 하나가 SSR, Server Side Redering(서버 사이드 렌더링)이에요.
이때 서버에서 렌더링한 코드는 HTML으로 구성되어 있어요. 아시는 것처럼 HTML만으로 동적인 동작을 수행하기 어려워요. 그래서 저희가 JavaScript(React)를 이용해서 HTML을 동적으로 만들죠.
서버에서 만들어진 HTML에 JavaScript(React)를 적용하는 것, 이걸 Hydration이라고 불러요. 렌더링된 코드가 HTML만 존재하다면 메마른 상태, JavaScript가 적용됐다면 촉촉한 상태라고 보는거죠.
정리하자면 서버에서 생성한(렌더링한) HTML을 저희가 React로 작성한 JavaScript 코드와 매칭해서 촉촉하게(동적으로) 만드는 과정이 Hydration이라고 이해하시면 될 것 같아요.
답변 드린 부분으로 이해가 가지 않으시는 점이 있다면 추가로 답변 남겨주세요! 도움이 되실만한 자료를 찾아서 공유드리고 부연 설명 드릴게요! 이해가 될 때까지 도와드릴게요.
감사합니다!
Hydration에 대해 이해가 되셨다니 다행이네요!
App Router에서 사용하는 서버 컴포넌트(RSC)가 효율적일 수 있는 이유도 말씀드릴게요!
서버 컴포넌트는 HTML이 아닌 형식(RSC Payload)으로 컴포넌트를 렌더링해요. 이는 서버 컴포넌트는 클라이언트 컴포넌트와 달리 Hydration 과정 없이 컴포넌트로 사용될 수 있다는 의미입니다. 덕분에 JavaScript 코드의 양이 줄어들게 되죠. 전체적인 JavaScript 코드가 적어지니 클라이언트로 내려주는 데이터와 단계가 줄어 속도나 성능 면에서 이점이 생기는 것이라고 이해하시면 될 것 같아요!
관련 내용은 카카오 페이 블로그에 정리된 React 18: 리액트 서버 컴포넌트 준비하기라는 글을 참고하시면 도움이 되실 것 같아요!
또 다른 질문이 생기시거나 답변이 부족하다면 언제든 질문 남겨주세요!
감사합니다.