Next.js - #server component, client component

Next.js에서는 component가 두가지 종류가 있다
server component와 client component

server component

기본값이라고 생각하면 편하다
'use client' 없이 만든 건 전부 server component이다

• 단점
  • useState, useEffect 등 사용 불가능
  • HTML에 JavaScript 기능 사용 불가능 (ex. onClick)
• 장점
  • 로딩 속도 빠름
    • 페이지 로드에 필요한 JS가 적기 때문
  • 검색엔진 노출 유리
• console 터미널에 찍힘

client component

js 파일 상단에 'use client' 라고 적혀있는 내부 컴포넌트들은 전부 client component이다

• 단점
  • 로딩 속도 느림
    • 페이지 로드에 필요한 JS가 많기 때문
    • Hydration이 필요하기 때문
      (Hydration : HTML을 유저에게 보낸 후 JS로 다시 HTML을 읽고 분석하는 일)
  • 검색엔진 노출 불리
• 장점
  • useState, useEffect 등 사용 가능
  • HTML에 JavaScript 기능 사용 가능
• console 개발자 모드에 찍힘

적용

큰 페이지는 → server component
큰 페이지 내부에서 기능이 필요한 부분들 → client component
➜ JS 양을 줄이면서 로딩 속도도 개선할 수 있다