2단계 — Server vs Client 컴포넌트

App Router 의 핵심 변화: 모든 컴포넌트는 기본 Server Component. 마우스/타자/state 가 필요할 때만 'use client' 를 붙입니다.

Server Component (기본)

// src/app/page.tsx
async function getMessage() {
  return { text: "서버에서 만든 문자열" };
}

export default async function Home() {
  const data = await getMessage(); // ← 서버에서 실행
  return <p>{data.text}</p>;
}

async 컴포넌트가 가능. fetch 도 결과가 캐시됨.

Client Component

// src/app/counter.tsx
"use client";
import { useState } from "react";

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(n + 1)}>{n}</button>;
}

useState / onClick 등 브라우저 API 가 필요하면 'use client'.

두 컴포넌트 합치기

// src/app/page.tsx
import Counter from "./counter";

export default function Home() {
  return (
    <main>
      <p>서버 텍스트</p>
      <Counter /> {/* 클라이언트 인터랙션 */}
    </main>
  );
}

다음 단계

3단계: API Route + Drizzle ORM →