use server VS use client

Next.js에서 "use server"와 "use client"는 서버 컴포넌트와 클라이언트 컴포넌트를 명시적으로 구분하기 위한 지시자(directive)입니다. 이들은 React의 서버 사이드 렌더링(SSR) 및 서버 컴포넌트 아키텍처를 활용하여 성능을 최적화하고 개발 경험을 개선하는 데 사용됩니다. 아래에서 간략히 설명합니다.

---

1. "use server"

• 의미: 해당 파일 또는 컴포넌트가 서버에서만 실행된다는 것을 나타냅니다.
• 사용 위치: 파일의 최상단에 작성합니다 (예: 'use server';).
• 특징:
  • 클라이언트로 전송되지 않으며, 서버에서 렌더링된 후 결과(HTML 등)만 클라이언트로 전달됩니다.
  • 데이터베이스 쿼리, 파일 시스템 접근, API 호출 등 서버 전용 작업에 적합합니다.
  • 클라이언트 측 JavaScript 번들에 포함되지 않아 번들 크기를 줄이고 보안을 강화합니다.
• 예시:
  • 이 컴포넌트는 서버에서 데이터를 가져와 렌더링 후 클라이언트로 HTML만 보냅니다.
• 'use server'; async function fetchData() { const data = await db.query('SELECT * FROM users'); return data; } export default async function ServerComponent() { const data = await fetchData(); return <div>{data.name}</div>; }
• 장점:
  • 클라이언트에 민감한 로직을 노출시키지 않음.
  • 초기 페이지 로드 속도 개선(클라이언트에서 실행할 코드가 줄어듦).

---

2. "use client"

• 의미: 해당 파일 또는 컴포넌트가 클라이언트에서 실행된다는 것을 나타냅니다.
• 사용 위치: 파일의 최상단에 작성합니다 (예: 'use client';).
• 특징:
  • 클라이언트 측에서 렌더링되며, useState, useEffect 같은 React 훅이나 브라우저 API(예: window)를 사용할 수 있습니다.
  • 서버에서 초기 HTML을 생성한 후, 클라이언트에서 하이드레이션(hydration)을 통해 인터랙티브하게 만듭니다.
  • 상태 관리나 사용자 이벤트 처리(예: 버튼 클릭) 등에 적합합니다.
• 예시:
  • 이 컴포넌트는 클라이언트에서 상태를 관리하며 버튼 클릭 이벤트를 처리합니다.
• 'use client'; import { useState } from 'react'; export default function ClientComponent() { const [count, setCount] = useState(0); return ( <button onClick={() => setCount(count + 1)}> Count: {count} </button> ); }
• 장점:
  • 클라이언트에서만 필요한 동적 인터랙션을 처리 가능.
  • 서버 컴포넌트와 조합하여 필요한 부분만 클라이언트로 분리 가능.

---

주요 차이점

구분	"use server"	"use client"
실행 위치	서버에서만 실행	클라이언트에서 실행
렌더링	서버에서 HTML 생성	클라이언트에서 하이드레이션
사용 사례	데이터 가져오기, 보안 로직	상태 관리, 이벤트 처리
클라이언트 번들	포함되지 않음	포함됨

---

Next.js에서의 통합

• 기본적으로 Next.js 13 이상의 App Router에서는 모든 컴포넌트가 서버 컴포넌트로 간주됩니다. "use client"를 명시하지 않으면 서버에서 실행됩니다.
• 서버 컴포넌트와 클라이언트 컴포넌트를 혼합하여 사용할 수 있습니다. 예를 들어, 서버 컴포넌트에서 데이터를 가져와 클라이언트 컴포넌트에 props로 전달 가능:
• 'use server'; export default async function Page() { const data = await fetch('https://api.example.com'); return <ClientComponent initialData={data} />; } // ClientComponent.jsx 'use client'; export default function ClientComponent({ initialData }) { const [data, setData] = useState(initialData); return <div>{data}</div>; }

---

요약

• "use server": 서버에서 실행하며, 클라이언트로 코드가 전달되지 않아 보안과 성능에 유리.
• "use client": 클라이언트에서 실행하며, 동적 UI와 사용자 상호작용에 적합.
• 두 지시자를 적절히 조합하면 Next.js의 강력한 서버-클라이언트 하이브리드 모델을 활용할 수 있습니다.