<aside> 💡

"use client" does not mean the site is Client Side Rendered (CSR)

즉, use client 디렉티브를 사용하는 것이 CSR을 의미하는 것이 아님

</aside>

With use client

The component gets prerendered with SSR or ISR/SSG if possible on the server. The html is send to the client and the javascript is send too. So it gets hydrated on the client and is interactive

Without use client

The component gets executed on the server and the resulting html or data is embedded into the html as json format so the react renderer can render it. Its js is NOT send to the client so it does not get hydrated, (only rendered from its json presentation) and is therefore not interactive

좀더 구체적으로 말하자면

기존의 전통적인 CSR은 서버로부터 스크립트 파일을 받아오고, 이를 활용해 클라이언트단에서 비어있는 index.html에 렌더링하는 방식이었다면,

Next.js 13+ 버전의 경우 서버 컴포넌트를 기본적으로 사용하며, “use client” 디렉티브를 사용하면 클라이언트 컴포넌트를 사용할 수 있게 됨.

이때, 클라이언트 컴포넌트 역시 서버에서 사전에 렌더링이 이루어지며, 렌더링된 html과 스크립트를 클라이언트로 보내 클라이언트 단에서 hydration이 이루어지게 됨.

즉, 클라이언트 컴포넌트(use client) 또한 가능한 한 많은 부분을 서버에서 사전에 렌더링하여 초기 성능을 최적화하고, 상호작용이 필요한 부분에만 CSR을 적용하는 하이브리드 접근 방식을 채택한 것

참고

Getting Started: Server and Client Components

Rendering: Client Components

What is the big deal with "use client"

Framer Motion and SSR