프론트엔드 개발을 하면서 SSR 렌더링 고려는 한번씩 해봤을 것이다. 이와 관련된 하이드레이션은 중요한 개념이라고 하는데...! 하이드레이션에 대해 알아보자.
하이드레이션(Hydration)이란?
: 서버에서 렌더링된 HTML에 클라이언트에서 자바스크립트를 연결해, 사용자와의 상호작용이 가능한 동적인 웹 애플리케이션을 만드는 과정이다.
이 하이드레이션 개념은 특히나 SSR(Server-Side Rendering) 또는 SSG(Static Site Generation) 같은 렌더링 방식에서 자주 사용되며 밀접한 관계이다!
하이드레이션 과정이 왜 필요할까?
SSR 렌더링을 통해 서버에서 미리 렌더링된 HTML을 클라이언트에게 전달하면,
초기 로드 속도가 빠르고 검색 엔진 최적화에 유리하다!
-> 왜 그럴까
: SSR은 브라우저가 웹 페이지를 요청했을 때 서버에서 이미 완성된 HTML을 생성해 전달하기 때문이다!
(CSR은 브라우저가 HTML을 요청했을 때, 일단 빈 HTML과 자바스크립트 파일을 전달한다. 브라우저가 자바스크립트를 다운로드하고 실행하고 나서야만 페이지 렌더링이 된다는 사실 참고!)
하지만, 서버에서 전달한 HTML만으로는 버튼 클릭 같은 동적 상호작용(이벤트 처리나 상태 관리)이 불가하다 :(
그래서, 이 문제를 해결하기 위해 클라이언트 측인 React나 Vue 같은 라이브러리 또는 프레임워크가 자바스크립트 코드를 실행해 HTML 요소와 연결하는 과정을 거치는 것이다!
-> 이게 바로 하이드레이션!
(SSG도 마찬가지로 동적인 기능을 제공하기 위해 하이드레이션이 필요한 것)
하이드레이션은 어떤 식으로 작동될까?
1. 서버 렌더링
: 서버에서 HTML을 렌더링 한 후 클라이언트로 전달
(서버는 리액트의 renderToString 메서드로 컴포넌트를 HTML 문자열로 변환한다고 한다)
이 변환을 항상 서버가 해주기 보다는 대개 Next.js 같은 프레임워크 사용함(pages 디렉토리 안의 파일을 자동으로 서버에서 렌더링)
2. 하이드레이션
: 클라이언트는 서버에서 전달받은 HTML을 DOM에 삽입하고, 받은 HTML과 컴포넌트를 연결한다.
(클라이언트가 리액트라면, hydrateRoot을 사용해서 기존 DOM 구조를 재사용하며 이벤트 리스너/상태를 추가한다)
"이 "재사용"이란 말은, 리액트는 새로 DOM을 생성하는 것이 아니라 기존 서버에서 렌더링된 HTML를 이용하는 것이라고 함!"
Next.js와 React를 같이 사용하고 있는 환경에서는, Next.js가 하이드레이션을 자동으로 처리!
이 하이드레이션의 단점은 뭘까?
첫 째로, 초기 성능 비용이 든다.
: 클라이언트에서 하이드레이션을 수행하는 동안 추가적인 CPU 리소스가 필요하다!
(서버 렌더링된 HTML을 클라이언트에서 분석하고 이벤트를 연결하기에 시간이 걸림)
두 번째로는, 중복 작업을 한다.
: 서버에서 먼저 HTML을 렌더링 한 후 클라이언트로 넘겨주는데, 클라이언트에서 동일한 작업을 반복적으로 수행해서 비효율적일 수가 있다.
마지막은, 복잡성이 증가할 수 있다.
: 클라이언트에서의 하이드레이션 과정이 필요할 때, 서버와 클라이언트가 동기화 되어야 하고 이 동기화를 유지하는 것이 어려울 수도 있다.
하이드레이션을 최적화 할 수 있는 방법이 몇 가지 있다!
1. 부분 하이드레이션
: 전체가 아닌 필요한 부분(동적 상호작용이 필요한 부분)만 하이드레이션이 가능하다!
불필요한 리소스를 사용하지 않고, CPU와 메모리 사용량 증가를 방지
(1) React의 lazy와 Suspense를 이용하기
위의 코드에서 Static Content를 갖고 있는 h1은 서버에서 렌더링 되고, lazy로 데려온 컴포넌트는 클라이언트에서 하이드레이션 된다고 한다!
(동적 상호작용이 필요한 컴포넌트는 lazy로 데려와서 하이드레이션 시키면 되는 듯 하다)
(2) Next.js의 dynamic()을 이용한 동적 import 활용하기
React에는 lazy가 있다면, Next에는 dynamic이 있다.
동적인 client component를 dynamic으로 import 해오면 이 부분만 하이드레이션을 함
(ssr: false의 옵션을 넣어줘야함)
2. 서버와 클라이언트 컴포넌트 분리
: Next.js 프레임워크에서는 서버 컴포넌트와 클라이언트 컴포넌트를 분리할 수 있다.
서버 컴포넌트는 서버에서만 렌더링 되고, 클라이언트 컴포넌트는 상호작용이 필요한 부분만 포함하기에 하이드레이션 부담을 줄일 수 있음
요즘 Next.js 강의를 듣고 있는데, 빨리 배운 거를 적용하고 싶다!
어서 적용할 새 프로젝트를 고안해야겠구만 :)
