𝑸. Hydration이 어떠한 개념인지 설명해주실 수 있나요?

Hydration의 경우 우리말로 '수화'라고 표현해요. '물을 줘서 촉촉하게 만든다' 정도의 의미를 담고 있습니다. Next.js를 하는데 물이 왜 나오고 촉촉하게 만든다는 게 무슨 의미인가 싶으실 거에요. 쉽게 이해하게 만드려고 만든 표현인데 오히려 어렵게 느껴지죠.


Next.js에서 지원하는 Pre-rendering은 사전 렌더링이라고 불러요. 클라이언트(브라우저)가 코드를 해석하기 전에 미리 렌더링해두는 것이죠. 그 중 하나가 SSR, Server Side Redering(서버 사이드 렌더링)이에요.


이때 서버에서 렌더링한 코드는 HTML으로 구성되어 있어요. 아시는 것처럼 HTML만으로 동적인 동작을 수행하기 어려워요. 그래서 저희가 JavaScript를 이용해서 HTML을 동적으로 만들죠. 서버에서 만들어진 HTML에 JavaScript(React)를 적용하는 것, 이걸 Hydration이라고 불러요. 렌더링된 코드가 HTML만 존재하다면 메마른 상태, JavaScript(React)가 적용됐다면 촉촉한 상태라고 보는거죠.


정리하자면 서버에서 생성한(렌더링한) HTML을 저희가 React로 작성한 JavaScript 코드와 매칭해서 촉촉하게(동적으로) 만드는 과정이 Hydration이라고 이해하시면 될 것 같아요.


https://www.inflearn.com/questions/1042785/comment/289159

Hydration 개념. - 인프런 | 질문 & 답변

인프런

Hydration 개념. - 인프런 | 질문 & 답변

다음 내용이 궁금하다면?

또는

이미 회원이신가요?

2023년 10월 14일 오전 12:02

 • 

저장 15조회 4,210

댓글 2