Co oznacza use client? Czy komponent działa tylko w przeglądarce?

'use client' wyznacza granicę modułów klienckich. Używam jej dla stanu, event handlerów i API przeglądarki.

'use client';
import { useState } from 'react';

export default function Counter() {
  const [n, setN] = useState(0);
  return <button onClick={() => setN(v => v + 1)}>{n}</button>;
}

Pułapka: Client Component może uczestniczyć w początkowym renderowaniu HTML na serwerze. Sama dyrektywa nie sprawia, że window jest dostępne podczas tego renderowania.

Praktycznie: dyrektywę umieszczam blisko interaktywnego fragmentu, żeby nie powiększać niepotrzebnie paczki JavaScript. Server Component może przekazać gotową zawartość jako children do komponentu klienckiego.