Next.js 하이드레이션

하이드레이션이란 서버에서 HTML을 먼저 보내줘 사용자가 화면을 빠르게 볼 수 있게 한 다음, 클라이언트에서 해당 HTML에 JavaScript코드를 결합하여 상호작용이 가능한 동적인 웹페이지로 만드는 과정입니다.

하이드레이션의 주요 역할 및 필요성

Next.js는 기본적으로 SSR이나 SSG 방식으로 HTML을 미리 생성하여 클라이언트에 전달할 수 있습니다.

HTML을 미리 생성과 하이드레이션의 이점

1. 초기 로딩 속도 향상 및 SEO 최적화: 서버에서 완성된 HTML을 받기 때문에 사용자는 빈 화면이 아닌 내용이 채워진 페이지를 빠르게 볼 수 있으며, 검색 엔진 최적화에도 유리합니다.

2. React 기능 활성화: 서버에서 내려준 HTML은 단순히 구조만 있는 정적인 상태입니다. 하이드레이션 과정을 통해 클라이언트의 React가 페이지를 인수하여 이벤트 리스너를 DOM 요소에 부착하고 상태를 관리할 수 있게 됩니다.

하이드레이션 과정

1. 서버 렌더링: Next.js가 HTML과 최소한의 JavaScript 번들을 생성하여 클라이언트에 전송합니다.
2. 클라이언트 렌더링: 브라우저는 HTML을 받아 화면에 보여줍니다.
3. 하이드레이션: JavaScript가 로드된 후, ReactDOM.hydrate() 메서드 등을 통해 HTML 구조에 React 컴포넌트의 로직을 일치시키고 연결합니다.
4. 완료