하이드레이션 ( Hydration )

하이드레이션(Hydration)은 주로 모던 웹 개발에서 사용되는 기법이다.

서버 사이드 렌더링 (SSR): 이 방식에서는 웹페이지의 초기 렌더링이 서버에서 이루어진다. 사용자가 페이지에 접속하면, 서버는 HTML, CSS, JavaScript 등을 포함한 완전한 페이지를 생성하여 사용자의 브라우저로 보낸다. 사용자는 페이지를 즉시 보게 되며, JavaScript는 이후에 실행된다.

클라이언트 사이드 렌더링 (CSR): CSR에서는 브라우저가 대부분의 렌더링 작업을 담당한다. 서버는 기본적인 HTML 구조와 JavaScript 파일을 보내고, JavaScript가 클라이언트 측에서 실행되면서 페이지의 내용을 동적으로 생성하고 렌더링한다.

하이드레이션 (Hydration): 이는 CSR과 SSR을 결합한 기법이다. 하이드레이션은 SSR로 생성된 정적 마크업에 JavaScript가 '활성화'되는 과정을 의미한다. 즉, 서버에서 렌더링된 정적인 페이지에 클라이언트 사이드의 JavaScript가 연결되어 인터랙티브한 요소가 작동하게 하는 것이다. 이 과정은 일반적으로 페이지가 로드된 후에 발생한다.

하이드레이션의 주요 장점은 초기 페이지 로딩 시간을 단축시키고, 사용자에게 빠른 피드백을 제공하는 동시에, 페이지의 인터랙티브한 부분들이 JavaScript를 통해 동작할 수 있도록 하는 것이다. 이는 사용자 경험을 향상시키고, 검색 엔진 최적화(SEO)에도 유리하다. 하지만, 복잡한 사이트에서는 하이드레이션 과정이 리소스를 많이 소모할 수 있으므로, 적절한 성능 최적화가 필요하다.