[nextjs] use client

server side render된 초기 HTML -> HTML 위에 React Application, Next.JS Application을 생성

이 hydration 과정이 모든 컴포넌트에 대해 발생하지 않음
server side render는 모든 component에 발생함
모든 컴포넌트가 서버 사이드에서 렌더됨
클라이언트에서 하이드 되는 컴포넌트는 오직 유즈 클라 지시어를 맨위에 갖고잇는 컴포넌트뿐
리액트 컴포넌트가 되지 않음(hydrate 됮 ㅣ않음)

초기 load에서 next.js는 interaction이 필요한 component를 server side render할 것임
html을 사용자에게 주고 나서 이벤리들 추가할 컴포넌트를 하이드레이트 할 거임
그건 여기에 유클을 사용할 때만
근데 크게 신경쓸 필욘 없음 에러 날리기 때문
만약 useState를 사용한다 -> 이 component가 interactive하다 -> 따라서 use clinet를 써줘야함

but use client는 오직 client side render만 의미하는 것은 아님
backend에서 render되고 frontend에서 hydrate 및 interactive됨을 의미
이게 만약 use hydrate였다면 좀 더 좋았을 것

client component를 사용하지 않는 모든 것들은 server component가 될 것임
즉, use client를 선언하지 않으면 기본적으로 모두 server component가 되는 것임
하지만 use client components도 server에서 먼저 render되고 나서 hydrate됨
server component는 server에서 먼저 render되고 hydrate되지는 않음
사용자가 js를 더 적게 다운받아도 된다느 의마라 좋음
만약 framwork에 어떤 component가 interactive해지고 어떤 component가 보통 html이 될지 말해주면 사용자가 다운받을 javascript 양이 적어지는 것을 의미함

예를 들어, navigation component가 client에 딱 한 번만 렌더되고 다시는 렌더될 일이 없다면, 어떠한 useState나 onClick events 같은 것들이 없을 경우 사용자에게 이 컴포넌트를 위한 코드를 다운로드 받게끔 할 필요가 있을까?

그럴 필요 없음
사용자는 use client를 가진 components의 js 코드만 다운로드 받게 됨 - 사용자가 다운로드 받아야 할 js 코드가 줄어들고 로딩 속도가 빨라짐

사용자는 use client를 가진 components의 javascript code만 다운로드 받게 되기 때문

만약 use client가 없는 component는 그 server component에 대한 javascript code를 다시 다운로드 할 필요가 없어지는 거임

server component는 data fetching 할 때 아주 효율적임 (일반 react application과 비교해서)
useQuery, React Query, swr, useState, useEffect를 사용하는 시대가 끝났다!?

Client Components

클라이언트 컴포넌트를 사용하려면 파일 상단, import 위에 React "use client" 지시어를 추가하면 됩니다.
"use client"은 서버와 클라이언트 컴포넌트 모듈 간의 경계를 선언하는 데 사용됩니다.
즉, 파일에 "use client"을 정의하면 하위 컴포넌트를 포함하여 해당 파일로 가져온 다른 모든 모듈이 클라이언트 번들의 일부로 간주됩니다.