Next.js에는 두 가지 종류의 컴포넌트가 있다.

1. Server Component
2. Client Component

쓰던대로 그냥 쓰면 Server Component
맨 위에 'use client'를 선언하면 Client Component

1. Server Component

장점

• 페이지 로드 시 자바스크립트가 필요 없어서 빠르다.

단점

• html 안에 자바스크립트를 사용할 수 없다.

<div onClick={}> 이런거 안됨.

• useState, useEffect 등 사용 불가.

2. Client Component

장점

• html 안에 자바스크립트 넣어서 기능 개발 가능

단점

• 자바스크립트로 인해 페이지 용량이 커지고 페이지 로딩 속도가 느려질 수 있다.
• hydration이라는 과정때문에 페이지 로드 속도가 더 느려진다.

So,

큰 페이지들은 Server Component로 만들고,
자바스크립트 기능이 필요한 특정 부분을 Client Component로 만들어서 사용하는게 좋다.