[NextJs] Component

 

Client Component

• 파일 최상단(중간x)에 **‘use client’**라 적으면 그 아래 생성한 컴포넌트는 모두 client 컴포넌트이다.
• HTML에 Javascript 기능넣기가 가능하다.
  • useState, useEffect 등 사용 가능

Server Component

• 아무 곳에서 만든 component는 모두 server 컴포넌트가 될 수 있다.
• HTML에 Javascript 기능넣기가 불가능하다.
  • ex) onClick={}
  • useState, useEffect 등 사용할 수 없음.

그럼 그냥 Client Component가 좋은거 아닌가?

• 기능적 제한이 server component에 비해 없어서 개발하기는 편하다.
• Page 로딩 속도 느리다.
  • Javascript가 많이 필요하기 때문이다.
  • Hydration이 필요하다.
    • html을 유저에게 보낸 후, javascript로 html을 다시 읽고 분석하는 일

그럼 왜 Server Component가 존재할까?

• Server component는 client component보다 로딩속도가 빠르다.
  • Page load할 때, 필요한 Javascript 코드양이 훨씬 적어서 그렇다.
  • 검색엔진 노출에 유리하다.

큰 페이지들은 server component로 만드는 것을 추천하고,

JS 기능이 필요한 부분만 client component로 만드는 것을 추천한다.