React Server Components (RSC) – Execuție exclusivă pe server cu zero bundle în Next.js

// Implicit în App Router (fără 'use client')
export default async function Articol() {
  const date = await db.query(...);
  return <article>{date.text}</article>;
}

Ce face React Server Components (RSC) - Execuție exclusivă pe server cu zero bundle

În Next.js App Router, fiecare componentă este implicit un Server Component dacă nu conține directiva `’use client’`.

Avantaje majore: zero impact asupra dimensiunii JavaScript descărcată de utilizator (librării masive de formatare precum `moment` sau `marked` rămân 100% pe server), acces direct securizat la baze de date și chei secrete, și randare mult mai rapidă pe dispozitive mobile slabe.

Restricții: nu pot folosi hook-uri interactive de stare (`useState`, `useEffect`) sau evenimente de mouse/tastatură (`onClick`, `onChange`).

Exemple

Exemplul 1: Server Component cu interogare directă a bazei de date

Execută query-ul pe server fără a trimite driverul SQL către browser.

import prisma from '@/lib/db';

export default async function ProfilPage() {
  const utilizator = await prisma.user.findFirst({
    where: { email: 'admin@dexblog.ro' }
  });

  return (
    <div>
      <h1>Profil: {utilizator?.name}</h1>
      <p>Rol: {utilizator?.role}</p>
    </div>
  );
}

Ieșire în terminal

Browserul primește doar HTML curat fără niciun octet de cod Prisma sau SQL.

Greșeli frecvente

• Încercarea de a atașa evenimente ‘onClick’ într-un Server Component; compilatorul va genera eroare și îți va cere să marchezi componenta cu ‘use client’.

Comenzi înrudite

• Directiva 'use client' - Trecerea la componente interactive de client: Marchează granița dintre codul executat exclusiv pe server și componentele interactive descărcate și hidrate în browser.
• 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.
• app/page.tsx - Definirea conținutului specific al unei rute: Fișierul special care face ca un segment de rută să fie accesibil public printr-un URL în browser.