[Next.js] "use client"는 CSR 방식과 동일할까?

Q1. 서버 컴포넌트 하위의 use client 로 선언된 컴포넌트는 CSR 방식으로 동작되는 거야?

네, use client로 선언된 컴포넌트는 CSR 방식으로 동작합니다.

즉, 브라우저에서만 실행되며, React의 클라이언트 전용 기능(useState, useEffect, DOM 조작 등`)을 사용할 수 있습니다.

하지만 Next.js의 App Router 환경에서 클라이언트 컴포넌트를 서버 컴포넌트와 조합해서 사용하는 방식은 기존 CSR 방식과는 약간의 차이가 있습니다.

 

use client가 선언된 컴포넌트의 동작 원리

1. CSR 방식으로 동작:
   • use client가 선언된 컴포넌트는 브라우저에서 렌더링되며, React의 클라이언트 라이프사이클(useState, useEffect 등)을 사용할 수 있습니다.
   • 서버 컴포넌트에서 클라이언트 컴포넌트를 호출하면, 클라이언트 컴포넌트는 HTML 구조만 서버에서 제공되고 실제 동작은 브라우저에서 수행됩니다.
2. 서버 컴포넌트와 조합:
   • 서버 컴포넌트는 HTML을 미리 생성해 클라이언트로 전달하고, 클라이언트 컴포넌트는 해당 HTML을 기반으로 브라우저에서 동작을 추가합니다.
   • 이 조합 덕분에 초기 렌더링은 서버에서 수행되지만, 클라이언트 컴포넌트가 필요한 동적 동작도 함께 구현할 수 있습니다.

 

CSR 방식과 use client 방식의 차이

특징	CSR	"use client"
초기 HTML	클라이언트에서 동적으로 생성됨	서버에서 미리 생성된 HTML을 사용
렌더링 위치	클라이언트에서 모든 렌더링 수행	서버에서 HTML 생성, 브라우저에서 클라이언트 컴포넌트 실행
SEO	SEO에 불리함 (검색 엔진이 HTML을 크롤링하기 어려움)	SEO에 유리함 (서버에서 HTML 제공)
초기 로딩 속도	느림 (전체 HTML을 브라우저에서 생성)	빠름 (HTML은 서버에서 생성, 클라이언트는 동작 추가만 수행)
동적 동작 가능 여부	가능	가능

 

예제(use client 방식)

// 클라이언트 컴포넌트 (use client)
"use client";

import React, { useState } from "react";

export default function ClientComponent() {
  const [count, setCount] = useState(0);

  return (
    <div>
      <h1>This is a Client Component</h1>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

// 서버 컴포넌트에서 클라이언트 컴포넌트를 호출
import ClientComponent from "./ClientComponent";

export default function ServerComponent() {
  return (
    <div>
      <h1>This is a Server Component</h1>
      <ClientComponent />
    </div>
  );
}

동작(use client 방식)

1. 서버에서 <h1>This is a Server Component</h1>와 ClientComponent의 HTML 구조가 클라이언트로 전송됩니다.
2. 브라우저에서 ClientComponent의 JavaScript가 실행되고 동작(버튼 클릭, 상태 관리 등)이 추가됩니다.

 

결론

• 결국 use client로 선언된 컴포넌트는 CSR 방식으로 동작합니다.
  • 브라우저에서만 실행되며 React의 클라이언트 전용 기능을 사용할 수 있습니다.
• 그러나 Next.js의 서버 컴포넌트와 조합하여 사용할 경우, 초기 렌더링은 서버에서 처리되므로 SEO와 초기 로딩 속도는 기존 CSR 방식보다 유리합니다.
• 기존 CSR 방식과의 주요 차이는 초기 HTML이 서버에서 생성되어 클라이언트로 전달된다는 점입니다. 이로 인해 성능 최적화와 SEO 개선이 가능합니다.