판단 framework

~18 min · server vs client, decision, tree

Level 0Curious

0 XP0/68 lessons0/11 achievements

0/120 XP to next level120 XP to go0% complete

Default 는 Server. Hard requirement 일 때만 승격.

모든 component 작성할 때 이 tree 거쳐:

이게 필요해?
├── useState / useEffect / useReducer?  → Client
├── onClick / onChange / onSubmit?      → Client
├── Browser API (window, navigator)?    → Client
├── Hook 요구 library?                 → Client
└── 위 다 아님?                        → Server ✓

"거의 server" 가 어떤 모양

전형적 Next.js app 에선 component 의 80~90% 가 Server Component. Page, list, card, header, footer, article, table — 다 server. State 나 event handler 들고 있는 leaf 만 'use client' 차고 있어.

실제 예

Blog post page (content render) — Server.
Search bar (controlled input) — Client.
Markdown renderer (data shape) — Server.
Theme toggle (localStorage write) — Client.
Like button (optimistic UI) — Client wrapper, server data feed.

Code

Server: blog page 그냥 render·tsx

// app/blog/[slug]/page.tsx — Server
export default async function BlogPost({
  params,
}: {
  params: Promise<{ slug: string }>;
}) {
  const { slug } = await params;
  const post = await fetchPost(slug);
  return <article>{post.content}</article>;
}

Client: search bar 가 state read/write·tsx

// components/SearchBar.tsx — Client
'use client';
import { useState } from 'react';
import { useRouter } from 'next/navigation';

export function SearchBar() {
  const [q, setQ] = useState('');
  const router = useRouter();
  return (
    <form onSubmit={(e) => { e.preventDefault(); router.push(`/search?q=${encodeURIComponent(q)}`); }}>
      <input value={q} onChange={(e) => setQ(e.target.value)} placeholder="Search" />
    </form>
  );
}

External links

Server vs Client decision

Exercise

Codebase 안 component 10 개 audit. 각각 위 framework 로 Server / Client 결정. 진짜 'use client' 안 필요한 거 flip.

Progress

Progress is local-only — sign in to sync across devices.

← PreviousClient Component Next →Server Component 안 data

이 페이지에서 버그를 발견하셨거나 피드백이 있으세요?문제 신고

🔔 답글 알림 (로그인 필요)

로그인 — 댓글을 남기려면 로그인해 주세요.

아직 댓글이 없어요. 첫 댓글을 남겨보세요.