[Next.js] "use client"를 왜 쓰는 걸까?

Next.js는 Hydration의 유무에 따라 client component와 server component로 나눠진다.

그럼 Hydration이란 무엇일까?

 

1. Hydration

• 정의
  • 사용자가 최초 html을 본 뒤에 어떤 일이 발생하는 지에 대한 과정을 말한다.
  • 달리 말해, 단순 html을 React Application으로 초기화하는 작업을 말한다.
• 과정
  1. 사용자가 페이지에 도착한 순간에는 아직 Javascript도 프레임워크도 로드되지 않은 더미 html을 보여준다. 이때 event listener 등은 작동하지 않는다.
  2. 그 후 아주 빠르게 react application이 초기화된다.
  3. 완료되면 react component가 되고 요소들이 interactive하게 된다.
  4. Hydration 과정을 거치면 event listener 등의 요소들이 정상적으로 작동하게 된다.
• Hydration 과정은 모든 component에 대해 발생하지 않고 컴포넌트 위에 "use client"라고 작성한 component에게만 발생한다.

 

2. "use client"

• "use client"를 쓰지 않는 이상 기본적으로 모든 컴포넌트는 server component이다.
• 파일 맨 위에 "use client"를 작성하면 백엔드에서 render된 후 프론트에서 hydrate 및 interactive 된다.
• 구분 장점
  • 자바스크립트가 다운받을 코드가 줄어들게 된다. = 페이지 로딩 속도가 빨라진다.

 

3. Component

• client component: "use client" 사용한 component ⇒ Render되고 Hydrate된다.
  • "use client"을 정의하면 하위 컴포넌트를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주된다.
  • client component는 server component 내에 포함할 수 있다.
• server component: "use client" 사용안한 component ⇒ Render되고 Hydrate되지 않는다.
  • server component는 client component 내에 포함할 수 없다.