[Next.js와 친해지기] 2. 서버 컴포넌트와 클라이언트 컴포넌트

💬 잊지 말자 서버 컴포넌트!!! 많은 경우의 수를 만나봐야 서버와 클라이언트의 구분이 명확해질 것 같다는 생각이 들었다.

 

📑 Next.js의 컴포넌트 API

• Next.js의 기본 컴포넌트는 서버 컴포넌트이다.
• 클라이언트 컴포넌트를 사용하려면 컴포넌트 최상단에 'use client' 선언이 필요하다.
  • 단, 클라이언트 컴포넌트는 '서버 + 클라이언트'의 하이브리드 컴포넌트로 이해해야 한다.
  • 클라이언트 컴포넌트를 사용해야 하는데 'use client' 선언이 없다면 에러가 표시된다.

'use client' 선언 없이 addEventListener을 썼을 때

 

📑 Next.js의 컴포넌트 구분

서버 컴포넌트 API

• 특징 : 보안, 캐싱, 성능 SEO 등의 이점
  • cookies / headers / redirect ...

 

클라이언트 컴포넌트 API

• 특징 : 유저와의 상호작용, 브라우저 API 활용 등의 이점
  • useState / useEffect / onClick / onChange / useRouter / userParams ...

 

---

참고

[실시간 강의/패캠] 실무 Next.js - 박영웅 강사님(교안 참고 - 블로그)

 

💬 본 포스팅은 공부 기록용으로 정확하지 않은 정보가 존재할 수 있습니다. 발견하신다면 알려주세요!