React 19의 Server Components로 성능을 최적화하고 SEO를 개선하는 방법을 살펴보세요.
서버에서 렌더링되는 컴포넌트의 기본 개념과 데이터 페칭
점진적 로딩과 Streaming을 활용한 성능 최적화
Client Components와 Server Components의 차이점과 성능 비교
// Server Component (기본)
export default async function ServerComponent() {
const data = await fetch('API_URL'); // 서버에서 실행
return <div>{data.title}</div>;
}
// Client Component ('use client' 필요)
'use client';
export default function ClientComponent() {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}