서버 컴포넌트를 이해하기까지

처음엔 모든 파일 맨 위에 'use client'를 붙였다. 경계를 어디에 둘지가 핵심이라는 걸 알기까지 꽤 걸렸다.

기본은 서버

App Router에서 컴포넌트는 기본이 서버 컴포넌트다. 데이터를 읽고 HTML을 만드는 일은 서버에서 끝내고, 브라우저에는 꼭 필요한 상호작용만 보낸다.

app/posts/page.tsx

import { posts } from "#site/content";
 
export default function Page() {
  // 서버에서 실행되므로 번들에 posts 데이터 처리 코드가 포함되지 않는다
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  );
}

'use client'는 잎사귀에

상태나 이벤트 핸들러가 필요한 가장 작은 단위에만 'use client'를 붙인다. 테마 토글 버튼이 좋은 예다.

"use client";
 
import { useTheme } from "next-themes";
 
export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}>
      테마 전환
    </button>
  );
}

처음엔 모든 파일 맨 위에 'use client'를 붙였다. 경계를 어디에 둘지가 핵심이라는 걸 알기까지 꽤 걸렸다.

기본은 서버

App Router에서 컴포넌트는 기본이 서버 컴포넌트다. 데이터를 읽고 HTML을 만드는 일은 서버에서 끝내고, 브라우저에는 꼭 필요한 상호작용만 보낸다.

app/posts/page.tsx

import { posts } from "#site/content";
 
export default function Page() {
  // 서버에서 실행되므로 번들에 posts 데이터 처리 코드가 포함되지 않는다
  return (
    <ul>
      {posts.map((post) => (
        <li key={post.slug}>{post.title}</li>
      ))}
    </ul>
  );
}

'use client'는 잎사귀에

상태나 이벤트 핸들러가 필요한 가장 작은 단위에만 'use client'를 붙인다. 테마 토글 버튼이 좋은 예다.

"use client";
 
import { useTheme } from "next-themes";
 
export function ThemeToggle() {
  const { resolvedTheme, setTheme } = useTheme();
  return (
    <button onClick={() => setTheme(resolvedTheme === "dark" ? "light" : "dark")}>
      테마 전환
    </button>
  );
}