"use client"

 
Next.js 오류나면 거의 대부분
"use client" 써주면 해결되는 경우가 많다.
그만큼 해결이 쉽지만 실수가 잦은 부분이라는 뜻이기도 하다.
 
말 그대로 client side에서 렌더링할 때 사용하는 기능을 포함한 컴포넌트들이 client component로 취급된다.
1. useState, useEffect
2. onClick과 같이 eventListner를 사용
3. browser API를 사용하는 component
 
use client가 포함된 컴포넌트와 해당 컴포넌트에 import된 컴포넌트, 자식들 모두 client에서 렌더링되게 되는 것이라고 한다...! (충격)
그러니까 결국 use client란 client boundary를 명시하는 것이다.

아래와 같이 dom render tree에서 어느 노드부터 client에서 렌더링할 지 경계를 나누는 것이다. 
 

 
 
뭔가 작은 애니메이션 하나를 위해서 전체 섹션이 client가 되어버리는게 마음에 안들수도 있는데...
https://nextjs.org/docs/app/building-your-application/rendering/composition-patterns#using-third-party-packages-and-providers

Rendering: Composition Patterns | Next.js

이런걸 참고하면 된다고 한다.
https://yozm.wishket.com/magazine/detail/2271/

새로 등장한 ‘리액트 서버 컴포넌트’ 이해하기 | 요즘IT

이 글에도 관련 내용이 있다.