[Next.js] 하이드레이션(Hydration)

웹 렌더링 방식: CSR과 SSR

---

Next.js는 어떻게 렌더링할까?

💡렌더링(Rendering)
     React와 같은 라이브러리에서 우리가 작성한 컴포넌트(JSX)는 브라우저가 직접 이해할 수 없다.
    컴포넌트를 브라우저가 이해할 수 있는 HTML로 변환해주는 과정이 바로 렌더링이다.

 

Next.js는 기본적으로 SSR(Server Side Rendering)을 사용한다.

SSR: 서버에서 HTML을 미리 만들어서 브라우저에 전달하는 방식

• 사용자가 페이지에 접속하면 서버가 해당 컴포넌트를 HTML로 바꿔준다.
• 브라우저는 이 HTML을 바로 보여줄 수 있다.
• 이 덕분에 초기 로딩 속도가 빠르고, SEO에도 유리하다.

하지만 HTML을 보여주는 역할만 한다. 정적인 HTML일 뿐이며, 클릭이나 입력 등 사용자 상호작용은 아직 불가능하다.😢

그래서 필요한 하이드레이션(Hydration) ! ! !

---

하이드레이션(Hydration)

하이드레이션은 SSR로 만들어진 정적인 HTML에 자바스크립트를 붙여, 다시 인터랙티브한 React 앱으로 만드는 과정이다.
즉, 서버에서 전달된 HTML 위에서 자바스크립트를 실행시켜 버튼 클릭, 상태 변경 등과 같은 인터랙션 기능을 활성화시키는 것

이 과정을 통해 브라우저는 HTML을 빠르게 렌더링한 뒤, React 앱을 초기화하여 동작하도록 만든다.

---

"use client"을 상단에 적는 이유

하이드레이션(Hydration)은 use client가 선언된 컴포넌트에만 적용

Next.js에서는 컴포넌트를 클라이언트에서만 렌더링하고 싶을 때, 해당 파일 상단에 "use client" 지시어를 작성해야 한다.

이 지시어는 해당 파일과 그 하위 컴포넌트들이 브라우저에서만 렌더링되도록 지정하는 명령이다.

즉, 서버에서 미리 렌더링되는 SSR 방식이 아니라, CSR 방식으로 처리하겠다는 의미다.

 

렌더링 방식	렌더링 속도	인터랙션 가능 시점
CSR	느림 ( JS 실행 후 )	초기부터 가능
SSR	빠름 ( HTML 먼저 )	하이드레이션 이후 가능

 

 

사용자와 상호작용이 필요한 인터랙티브한 컴포넌트들은 브라우저에서 하이드레이션(Hydration)이 필요하다.

• 사용자와 상호작용(클릭, 입력 등)이 있는 컴포넌트
• 이벤트 핸들러(onClick, onChange 등)를 사용할 때
• React의 Hook을 사용할때 ( useState, useEffect, useRef, useContext 등)

이때 use client를 통해 명시적으로 클라이언트에서 실행되도록 지정할 수 있다.

 

---

use client의 장점

• 불필요한 자바스크립트 번들 크기 감소
  인터랙션이 필요 없는 컴포넌트는 서버에서만 렌더링됨
• 초기 로딩 속도 개선
  브라우저가 다운로드해야 할 JS가 줄어듦
• 구조가 명확해짐
  어떤 컴포넌트가 서버에서, 어떤 컴포넌트가 클라이언트에서 동작하는지 한눈에 파악 가능