Hydration에 대하여

 스파르타 강의를 들으면서 4가지 렌더링 방식(SSG, CSR, ISR, SSR)을 배웠다. 그런데 SSR을 배우는 과정에서 SSR는 사용자와 상호작용되지 않는다고 이해했고, 그걸 튜터님한테 말씀드렸는데 hydration이라는 것이 끝나면 상호작용이 가능하다고 하셨다. 이어 hydration에 대해 공부하고 공부한 내용을 토론하자고 말씀을 주셔서 개발 아티클들을 몇 개 뒤져보고 내가 이해한 내용을 기록하려고 한다. 

 

1. 정의

 SSR(Server Side Rendering)에서, 서버에서는 사용자의 요청이 있을 때 마다 페이지를 새로 그려서 사용자에게 제공한다. 서버에서 index.html 파일을 제공하고 곧이어 자바스크립트 파일을 제공하는데, 브라우저에서는 html 파일을 미리 로드하고 자바스크립트 파일을 html DOM 요소 위로 리렌더링시킨다. 

 쉽게 말해 자바스크립트 파일을 html의 맞는 위치에 퍼즐 맞추기 하듯 내리꽂는 과정이다. (메마른 땅(html)에 수분 공급(javascript)을 하는 과정이라고도 말한다.)

 

2. 문제점

 - 현재 제공되는 API를 사용하기 위해서는 HTML에 렌더링 할 때 서버 측에서 컴포넌트에 필요한 데이터를 모두 준비해두어야 한다. 

 - 한번 Hydration이 시작되면 전체 tree에 대해 Hydration이 완료되기 전 까지 사용자는 다른 모든 기능과도 상호작용할 수 없다. 

 

3. 해결 방법

 React18에서는 Streaming HTML과 Selective Hydration을 제시한다. 

1. Streaming HTML : 서버에서 HTML 파일을 스트리밍의 형식으로 전달

2. Selective Hydration : 애플리케이션의 선택한 부분을 Suspense로 감싸주고 선택적으로 Hydration을 진행한다. 

 

4. 흥미로웠던 점 (Hydration을 공부하면서)

 - 개발 도구라고 하면 다 될 것 같고 한계가 없을 것 같고 그런데, 안되는 부분이 있고 문제점이 있다는 게 신기했다. 또한 그것을 보완하기 위해 꾸준히 업데이트가 된다는 점도 흥미로웠고, React 18이 모든 해결책을 제시한 것 같지만 또 다른 문제점이 있지 않을까? 생각하게 되었다. 

 - 아티클을 읽어보는 게 공부에 많이 도움이 된다. 비슷한 내용을 여러 번 읽다 보니 이해가 좀 더 깊이 되는 걸 느낀다. 

 - Hydration이 SSR과 같은 리액트 렌더링 방식과 Streaming HTML의 개념을 연결해 주는 꽤나 중요한 다리라고 느꼈다. 

 

참고 자료

 [Next.js] Hydration