본문 바로가기

웹 개발/Next.js

Next.js) Server Component vs Client Component

Server Component와 Client Component 가 뭔 차이인지 알아보기 위해 본 영상에서 중요한 내용을 정리한 글이다. 


 

Server components

서버 컴포넌트로 만드는게 좋은 컴포넌트들의 특징

 

  1. 데이터 fetch를 하는 컴포넌트
  2. DB에 직접 접근하는 컴포넌트
  3. 민감 정보 (접근 토근이나 API 키 값은거)
  4. 의존성이 강한 것

 

Client components

클라이언트 컴포넌트로 만드는게 좋은 컴포넌트들의 특징
  1. 사용자 상호작용이 많은 것들, 이벤트 리스너가 많은 것
  2. state와 lifecycle effect를 사용하는 것들
  3. 브라우저 api만 사용하는 것들
  4. 커스텀 Hook 
  5. react class 컴포넌트

클라이언트 컴포넌트 만들 때는 서버랑 똑같은데 위에 파일 최상단에 'use client'라고 한 줄 적어줘야 된다. 그리고 useState 같은 것들은 클라이언트 컴포넌트에서만 쓸 수 있다. 

 

요런 특성들을 정리한 사진인데 대충 이거 보면 감이 온다. 


References