Kam patří "use client"? Co nejníž
Direktiva "use client" neoznačuje komponentu, ale hranici. Všechno, co importujete pod ní, letí do prohlížeče. Takhle ji držet na uzdě.
V aplikacích se Server Components (Next.js App Router) jsou komponenty serverové, dokud neřeknete jinak. Direktiva "use client" přitom neříká „tahle komponenta je klientská“ — říká „odsud dolů je všechno, co importuji, součástí klientského bundlu“.
Typická chyba
"use client"; // ❌ celá stránka je teď klientská
import { useState } from "react";
import { marked } from "marked"; // 40 kB do prohlížeče
export default function ProductPage({ product }) {
const [qty, setQty] = useState(1);
return (
<article>
<div dangerouslySetInnerHTML={{ __html: marked(product.description) }} />
<input type="number" value={qty} onChange={(e) => setQty(+e.target.value)} />
</article>
);
}Kvůli jednomu inputu putuje do prohlížeče celý Markdown parser.
Lepší: interaktivní ostrůvek
// ProductPage.tsx — Server Component, bez direktivy
import { marked } from "marked"; // zůstane na serveru
import { QuantityPicker } from "./QuantityPicker";
export default function ProductPage({ product }) {
return (
<article>
<div dangerouslySetInnerHTML={{ __html: marked(product.description) }} />
<QuantityPicker />
</article>
);
}// QuantityPicker.tsx
"use client";
import { useState } from "react";
export function QuantityPicker() {
const [qty, setQty] = useState(1);
return <input type="number" value={qty} onChange={(e) => setQty(+e.target.value)} />;
}Serverové děti uvnitř klientské komponenty
Klientská komponenta nemůže importovat serverovou, ale může ji dostat jako children:
<Accordion> {/* "use client" — drží stav otevření */}
<ArticleBody /> {/* Server Component — renderuje se na serveru */}
</Accordion>ArticleBody se vyrenderuje na serveru a klient dostane jen hotový výsledek.
Pravidla do kapsy
- Direktivu dávejte na listy stromu — tlačítka, inputy, animace.
- Props přes hranici musí být serializovatelné (žádné funkce kromě Server Functions).
- Těžké knihovny pro formátování, Markdown nebo zvýrazňování kódu nechte na serveru.