use server와 use client 📡

React (특히 Next.js 13 이후 버전이나 React Server Components 환경)에서 사용하는 use client와 use server는 컴포넌트가 실행될 위치 (브라우저 vs 서버)를 명시하기 위한 지시자를 말한다.

 

use client

• 클라이언트 컴포넌트 선언
• 브라우저에서 실행되어야 함을 명시하는 지시어
• React 18부터 도입된  Server Components에서는 기본적으로 모든 컴포넌트가 서버에서 렌더링되는데 이때, use client가 있어야 브라우저 전용 기능들을 사용할 수 있다.

 

사용 시점

• useState, useEffect, useRef 같은 React Hook을 쓰는 경우
• window, document, localStorage등 브라우저 API를 쓰는 경우
• 사용자 인터렉션이 필요한 컴포넌트 (버튼 클릭, 모달 등)

// Button.tsx
"use client";

import { useState } from "react";

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

  return <button onClick={() => setCount(count + 1)}>Click: {count}</button>;
}

 

 

use server

• Next.js 14부터는 서버에서만 실행되는 함수를 명확히 표시하기 위해 use server 지시어가 도입
• 브라우저로 보내지 말아야할 비즈니스 로직, DB요청, 인증 관련 등의 코드를 보호

 

사용 시점

• 서버 액션을 정의할 때
• 클라이언트에서 form action, onSubmit 등으로 서버 함수를 호출하려고 할 때

// actions.ts
"use server";

export async function submitForm(data: FormData) {
  // 서버에서만 동작하는 로직
  await saveToDatabase(data);
}


// ClientForm.tsx
"use client";

import { submitForm } from "./actions";

export default function ClientForm() {
  return (
    <form action={submitForm}>
      <input name="email" />
      <button type="submit">Submit</button>
    </form>
  );
}

 

use server가 없으면, 해당 함수가 클라이언트 번들로 전송될 수 있어 보안상 위험하다.

 

정리

구분	"use client"	"use server"
역할	클라이언트 컴포넌트 선언	서버에서만 실행되는 함수 선언
위치	컴포넌트 파일 최상단	서버 액션 함수 최상단
사용 이유	React Hook, 브라우저 API 필요 시	DB 접근, 인증 등 보안 로직 실행 시
도입 시기	React 18 / Next.js 13	Next.js 14 이상

 

추가 팁

• 기본은 서버 컴포넌트이다. 따라서 React Hooks를 쓰지 않는다면 굳이 use client는 필요 없다.
• 서버 컴포넌트에서 클라이언트 컴포넌트를 import할 수 있지만, 반대는 불가하다.
• 클라이언트 컴포넌트는 서버 액션을 props나 form action으로 받아 호출할 수 있다.

 

이상 스텔라였습니다. ✍️