Server Component 가 default

~22 min · RSC, default, server

Level 0Curious

0 XP0/68 lessons0/11 achievements

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

새 default

App Router 안에선 모든 component 가 Server Component, opt-out 안 하면. 옛 React 의 반대 — "SSR 안 하면 다 browser" 가 아니라 "Client mark 안 하면 다 server" 야.

실제로 의미하는 것

async component 쓸 수 있음 — render 동안 await 됨.
DB, file, secret 직접 읽기 — browser 로 안 새.
무거운 library (markdown parser, syntax highlighter, date formatter) 가 render 결과로 JS 0 byte ship.
Ship 하는 HTML 이 hydration shell 이 아니라 render 결과 자체.

Server Component 가 못 하는 것

State 없음, effect 없음, event handler 없음, browser API 없음. 이 중 하나라도 필요해지는 순간 Client Component 로 (다음 lesson).

Code

Server Component, directive 불필요·tsx

// app/users/page.tsx — server 에서 도는
import { db } from '@/lib/db';

export default async function UsersPage() {
  const users = await db.user.findMany();        // 직접 query, API 불필요
  const apiKey = process.env.SECRET_API_KEY;     // server-only env
  return (
    <ul>
      {users.map(u => <li key={u.id}>{u.name}</li>)}
    </ul>
  );
}
// HTML ship; 이 component 가 JS 에 0 byte 기여

Marker: server-only module·ts

// lib/db.ts
import 'server-only';
import { PrismaClient } from '@prisma/client';

export const db = new PrismaClient();
// Client Component 에서 import 하면 build-time error.

External links

Exercise

App 안 list-view page 골라, client-side fetch 를 Server Component async render 로 바꿔. Network tab 에서 list 자체가 JS 0 인지 확인.

Progress

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

← 🗺️ App Router & Routing퀴즈 · 4 questions Next →왜 Server Component?

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

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

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

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