Next.js에서 Hydration(하이드레이션) 과정은 무엇인가요?

Next.js에서 하이드레이션은 서버에서 미리 렌더링된 HTML 마크업을 React가 클라이언트 측에서 "인수"하는 과정이라고 생각하시면 됩니다.

좀 더 자세히 설명드리면, 서버에서 초기 HTML을 만들어서 브라우저에 보내면, 브라우저는 이 HTML을 화면에 표시합니다. 이때는 그냥 정적인 화면일 뿐이죠.

하이드레이션 과정에서 React는 이 정적인 HTML 구조를 분석하고, 해당 HTML에 연결된 React 컴포넌트를 찾아서 연결합니다. 그리고 각 컴포넌트에 필요한 이벤트 핸들러들을 부착해서, 사용자와 상호작용할 수 있도록 만들어줍니다.

쉽게 말해, 서버에서 만들어진 정적인 HTML 페이지에 React가 생명력을 불어넣어서, 동적인 웹 애플리케이션으로 만들어주는 과정이라고 할 수 있습니다. 이 과정을 통해 초기 로딩 속도를 개선하고, SEO에도 유리하게 만들 수 있습니다.