Componentes solo del servidor para rendimiento optimizado, predeterminado en App Router. Ideal para Apps modernas, aplicaciones con muchos datos y Apps seguros que requieren lógica del lado del servidor.
RSC usa Server Components por defecto en App Router. Los Server Components no pueden importar Client Components.
// Server Component (por defecto)
export default async function ServerComponent() {
const res = await fetch("https://api.example.com/data");
const data = await res.json();
return (
<div>
<h1>{data.title}</h1>
<ClientComponent data={data} />
</div>
);
}
// Client Component (cuando se necesita)
"use client";
import { useState } from "react";
export function ClientComponent({ data }: { data: any }) {
const [count, setCount] = useState(0);
return <button onClick={() => setCount(count + 1)}>{count}</button>;
}