1. 인사
안녕하세요. 이번에는 Hydration에 대해 설명하려고 합니다.
discord clone을 하면서 Nextjs를 공부하던도중 Hydration error가 발생하여 이를 정리하고 글을 작성합니다.
2. Nextjs Rendering 방식
우선 Nextjs에서 Hydration에 대해 알기 전에 간단히 알고 넘어가야 할 것이 있습니다.
바로 Nextjs Rendering 방식입니다.
여기서 React의 rendering 방식에 대해서는 이미 알고 있다고 가정하고 따로 설명을 하진 않겠습니다.
Nextjs는 기본적으로 Pre-rendering을 사용하고 있습니다.
2.1 Pre-rendering?
서버에서 각 페이지의 HTML 파일을 미리 생성하는 것
Nextjs를 사용했다면 들어봤을만한
- Server-Side Rendering
- Static Site Generation
이 Nextjs가 사용하고 있는 Pre-rendering 방식입니다.
이러한 Pre-rendering 방식을 사용함으로써 Nextjs는 초기 HTML을 화면에 렌더링하고 지금부터 설명할 Hydration을 통해 JS를 입힌 동적인 UI로 바꿉니다.
3. Hydration?
일부로 Nextjs 단위에서 Hydrate가 뭔지 묻지 않고 Hydrate의 단어적 의미부터 파악하려고 위와 같이 ChatGPT에게 물어봤습니다.
ChatGPT에 의하면 "수분을 공급하거나 체내 수분을 채우는 것을 의미" 한다는데, 어느정도 맥락이 똑같은거 같습니다.
Nextjs server는 Pre-rendering된 웹 페이지를 client에게 보내고, React에서 번들링된 JS를 client에 전송합니다.
이에 따라 Per-rendering된 Html을 화면에 렌더링하고, 그 후 Js가 적용된 형태로 기존 HTML DOM 요소를 한 번더 rendering을 함으로써 우리가 실제 사용하게 되는 웹 사이트가 되는 것이죠.
위의 과정을 Hydration이라고 합니다.
"이것은 마치 자바스크립트 코드들이 DOM 요소 위에 물을 채우 듯 필요로 하던 요소들을 채운다 하여 Hydrate(수화)라는 용어를 쓴다고 하죠."
이 부분은 다른 블로그 글을 본 것인데 진짜 미친 표현인 것 같습니다. 그쵸??
3.1 총 2번의 rendering, 비효율적??
앞서 살펴본 내용들에 의하면 Server측에서 html을 가져와 rendering하고, client에서 Js를 입혀 rendering을 하는 총 2번의 rendering이 이루어짐을 알 수 있습니다.
이는 보기에 꽤 비효율적으로 보일 수 있습니다. 하지만 아닙니다.
왜??
- Server에서 가져온 HTML은 되게 Js가 없는 형태로 되게 가볍기 때문에 오히려 사용자에게 빠른 웹 페이지를 제공할 수 있음.
- Server에서 가져온 HTML과 React에서 가져온 Js를 매칭 시킬 때, 실제로 웹 페이지를 다시 그리지 않음.
이러한 두 가지 이유로 인해 Nextjs에서 총 2번의 Rendering이 결코 비효율적이라고 볼 수는 없는 것입니다.
참고 Blog : https://helloinyong.tistory.com/315
