În arhitectura modernă React Server Components (RSC), directivele 'use client' și 'use server' nu sunt comenzi de execuție, ci etichete de demarcație la nivel de modul (bundler directives) care instruiesc compilatorul unde să despartă codul între mediul de rulare de pe server și pachetul de cod distribuit către browser.
| Directivă | Unde se plasează | Semnificație arhitecturală |
|---|---|---|
'use client' |
La prima linie din fișier. | Marchează o graniță de client (Client Boundary). Modulul și toți copiii săi vor fi împachetați în fișierul JavaScript descărcat de browser, având acces la hooks (useState, useEffect), evenimente și API-uri de DOM. |
'use server' |
La nivel de fișier sau la începutul unei funcții asincrone. | Definește o Server Action. Funcția este compilată într-un endpoint backend securizat pe care clientul îl poate apela printr-un apel RPC (Remote Procedure Call) automat. |
Colaborarea dintre ‘use server’ și o componentă de client
// Fisier: actiuni/salvare.js
'use server';
export async function salveazaNotitaInBazaDeDate(text) {
// Rulează EXCLUSIV pe serverul Node.js / Edge Runtime:
console.log('Salvare securizată pe server:', text);
return { id: 101, status: 'salvat' };
}
// Fisier: componente/EditorNotite.jsx
'use client';
import { useState } from 'react';
import { salveazaNotitaInBazaDeDate } from '../actiuni/salvare';
export default function EditorNotite() {
const [text, setText] = useState('');
async function handleTrimite() {
// Apelează funcția de pe server ca pe o funcție locală:
const raspuns = await salveazaNotitaInBazaDeDate(text);
alert(`Răspuns server: ${raspuns.status}`);
}
return (
<div>
<textarea value={text} onChange={e => setText(e.target.value)} />
<button onClick={handleTrimite}>Salvează</button>
</div>
);
}
Întrebări & Exemple de Cod:
Directivele ‘use client’ și ‘use server’ în React: Granița dintre Server și ClientAi o nelămurire despre utilizarea comenzii
Directivele ‘use client’ și ‘use server’ în React: Granița dintre Server și Clientsau ai descoperit un truc / fragment de cod util? Distribuie-l cu ceilalți programatori!Fii primul care pune o întrebare sau distribuie un fragment de cod / prompt!
Nu au fost adăugate încă întrebări sau exemple de cod pentru această pagină. Dacă ai întâlnit o problemă sau ai un snippet util, adaugă-l mai jos pentru a-i ajuta pe ceilalți.