Hydration 개념.

Question

질문 가이드 📖 강의에서 이해가 안가는 부분이 있나요? 강사님께서 hydration이라고 언급하셨는데 정확히 어떠한 개념인지 설명해주실 수 있나요?? Next.js 공부 1년동안 했는데도 개념이 모호하네요.. 😅     좋은 퀄리티의 강의 감사합니다.

하조은 · Answer

안녕하세요! 질문 남겨주시고 강의 봐주셔서 감사합니다.  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 이라고 이해하시면 될 것 같아요.   답변 드린 부분으로 이해가 가지 않으시는 점이 있다면 추가로 답변 남겨주세요! 도움이 되실만한 자료를 찾아서 공유드리고 부연 설명 드릴게요! 이해가 될 때까지 도와드릴게요.   감사합니다!

유시온 · Answer

아하 hydration이라는 개념은 이해가 됐습니다 🤩 그러면 app router는 컴포넌트 단위로 js를 주입?하기 때문에 필요한 부분마다 할 수 있어서 더욱 효율적이라는 말씀이신건가요?!!