use client

• 클라이언트 사이드 렌더링
• 브라우저에서 실행
• 상태 관리 및 이벤트 핸들링 가능
• 브라우저 전용 API 접근 가능
• 서버 사이드 렌더링(SSR) 후 클라이언트에서 다시 렌더링
• 컴포넌트 최상단에 "use client"를 선언

"use client";

import { useState } from 'react';

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

use server

• 서버 사이드 렌더링
• 데이터 페칭 및 비동기 로직 처리
• 클라이언트에서 실행되지 않음
• SEO 최적화 가능
• 컴포넌트 최상단에 "use server"를 선언

"use server"; // 서버에서 실행됨

export async function getData() {
  const res = await fetch('<https://api.example.com/data>');
  const data = await res.json();
  return data;
}

// pages/index.js
import { getData } from './api/data';

export default async function Home() {
  const data = await getData();

  return (
    <div>
      <h1>Data from server</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
}