Directiva ‘use client’ – Trecerea la componente interactive de client în Next.js

'use client';

import { useState } from 'react';

export default function Contor() {
  const [val, setVal] = useState(0);
  return <button onClick={() => setVal(val + 1)}>Click: {val}</button>;
}

Ce face Directiva 'use client' - Trecerea la componente interactive de client

Directiva 'use client' trebuie plasată la prima linie a fișierului, înaintea oricăror importuri.

Este necesară ori de câte ori o componentă folosește: hook-uri React (`useState`, `useEffect`, `useReducer`, `useRef`), ascultători de evenimente (`onClick`, `onSubmit`), API-uri de browser (`localStorage`, `window`, `navigator`) sau hook-uri personalizate de client.

Recomandare de arhitectură: împingeți directiva `’use client’` cât mai jos în arborele de componente (de exemplu doar pe un buton sau pe bara de căutare), lăsând restul paginii ca Server Component.

Exemple

Exemplul 1: Crearea unui buton de copiere cod interactiv

Folosește starea locală și API-ul de clipboard din browser.

'use client';

import { useState } from 'react';

export default function ButonCopiere({ text }: { text: string }) {
  const [copiat, setCopiat] = useState(false);

  const copiaza = async () => {
    await navigator.clipboard.writeText(text);
    setCopiat(true);
    setTimeout(() => setCopiat(false), 2000);
  };

  return (
    <button onClick={copiaza} className="btn-copy">
      {copiat ? 'Copiat!' : 'Copiază codul'}
    </button>
  );
}

Ieșire în terminal

Butonul răspunde instant la click în browser.

Greșeli frecvente

• Marcarea layout-ului principal sau a întregii pagini cu ‘use client’, anulând toate beneficiile de performanță și securitate oferite de Server Components.

Comenzi înrudite

• React Server Components (RSC) - Execuție exclusivă pe server cu zero bundle: Componente React rulate exclusiv pe server care trimit către browser doar HTML și instrucțiuni compacte, fără cod JavaScript în bundle.
• Directiva 'use server' - Definirea acțiunilor de server (Server Actions): Permite rularea funcțiilor asincrone direct pe server, apelabile transparent din formulare HTML sau din butoane client fără a scrie manual API Routes.