서버 vs 클라이언트 컴포넌트

// 서버 컴포넌트 — 별도 표시 없음 (기본값)
// app/users/page.tsx

export default async function UsersPage() {
  // ✅ 서버에서 직접 DB 조회!
  const users = await db.user.findMany();

  // ✅ 서버에서 직접 API 호출!
  const data = await fetch("https://api.example.com/data");

  return (
    <ul>
      {users.map(user => (
        <li key={user.id}>{user.name}</li>
      ))}
    </ul>
  );
}

// ❌ useState, useEffect 사용 불가!
// ❌ onClick 등 이벤트 핸들러 불가!

"use client"; // ← 이 한 줄이 핵심!

import { useState } from "react";

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

  return (
    <div>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>
        +1
      </button>
    </div>
  );
}

// 1️⃣ 클라이언트 컴포넌트 — 좋아요 버튼
// components/LikeButton.tsx
"use client";
import { useState } from "react";

export function LikeButton({ initialLikes }: {
  initialLikes: number;
}) {
  const [likes, setLikes] = useState(initialLikes);
  return (
    <button onClick={() => setLikes(likes + 1)}>
      ❤️ {likes}
    </button>
  );
}

// 2️⃣ 서버 컴포넌트 — 게시글 페이지
// app/post/[id]/page.tsx
import { LikeButton } from "@/components/LikeButton";

export default async function PostPage({
  params,
}: {
  params: { id: string };
}) {
  // ✅ 서버에서 DB 조회
  const post = await db.post.findUnique({
    where: { id: Number(params.id) },
  });

  return (
    <article>
      <h1>{post.title}</h1>
      <p>{post.content}</p>
      {/* ✅ 클라이언트 컴포넌트에 데이터 전달 */}
      <LikeButton initialLikes={post.likes} />
    </article>
  );
}