React 서버 컴포넌트와 클라이언트 컴포넌트 혼합 사용하기

components/ServerComponent.js

export default async function ServerComponent() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts/1');
  const post = await res.json();

  return (
    <div>
      <h1>서버 컴포넌트</h1>
      <h2>{post.title}</h2>
      <p>{post.body}</p>
    </div>
  );
}

 

components/ClientComponent.js

'use client';

import { useState } from 'react';

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

  return (
    <div>
      <h1>클라이언트 컴포넌트</h1>
      <p>카운트: {count}</p>
      <button onClick={() => setCount(count + 1)}>증가</button>
    </div>
  );
}

 

app/page.js

import ServerComponent from './components/ServerComponent';
import ClientComponent from './components/ClientComponent';

export default function HomePage() {
  return (
    <div>
      <ServerComponent />
      <ClientComponent />
    </div>
  );
}

 

 

• 서버 컴포넌트를 활용하면 클라이언트에서 API 요청을 최소화할 수 있음
• 클라이언트 컴포넌트와 혼합하여 사용자 인터랙션을 추가 가능