Компоненти тільки сервера для оптимізованої продуктивності, за замовчуванням у App Router. Ідеально для Сучасних додатків, додатків з багатьма даними та Безпечних додатків, які потребують серверної логіки.
RSC використовує Server Components за замовчуванням у App Router. Server Components не можуть імпортувати Client Components.
// Server Component (за замовчуванням)
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 (коли потрібно)
"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>;
}