[Next.js] client/server component

Next.js에는 client component와 server component, 2가지가 존재한다.

📍 client component

component 만들 때 페이지 맨 위에 'use client' 라는 코드를 넣으면, 해당 페이지의 모든 component는 client component가 된다.

➡️ 그럼 Next.js는 기본적으로 server component란 소리

특징

• Html에 JavaScript 기능 사용 가능
  ex) onClick, form 이벤트
• useState, useEffect 등 사용 가능

단점

• 페이지를 로드할 때 필요한 JavaScript이 많으니까 로딩 속도가 느림
• hydration으로 인해 로딩 속도가 느려질 수 있음
  -> Html을 로드하고나서 React 문법을 적용하기 위해, 컴퓨터가 Html을 분석하는 과정

📍 server component

사용자와 상호작용하지 않는 부분이나 데이터를 보여주기만 하는 부분은 server component로 만든다.

특징

• Html에 JavaScript 기능 사용 불가능
• useState, useEffect 등 사용 불가능

장점

• 페이지를 로드할 때 필요한 JavaScript이 적으니까 로딩 속도가 빠름
• 검색 엔진 노출에 유리

➡️ 그러니까 최상위 페이지를 client component로 만들면, Next.js 쓰는 의미가 없음

📍 추천 방법

보통 큰 페이지들은 server component로 만들고, 그 안에 기능들이 필요한 부분은
client component로 만든다.

➡️ JavaScript 양도 줄일 수 있고, 로딩 속도도 개선!

( 출처 : 생활코딩 )