React Server Components (RSC) și Server Actions în React 19 / Next.js 15 în React & Next.js

Tradițional, aplicațiile React rulau exclusiv în browserul utilizatorului (Single Page Application – SPA). Aceasta însemna că browserul trebuia să descarce un pachet JavaScript masiv, să-l parseze, să execute codul pentru a genera un schelet HTML gol, iar apoi să declanșeze zeci de cereri fetch() către un API REST pentru a popula datele.

React Server Components (RSC) schimbă radical ecuația: componentele se execută pe serverul Node.js/Edge, au acces direct la sistemul de fișiere, baze de date (Postgres, Mongo) sau microservicii interne și generează direct o descriere compactă a arborelui UI. Zero octeți de cod din Server Component nu ajung în pachetul JavaScript al clientului!

// actions/checkout.ts
'use server';

import { redirect } from 'next/navigation';
import { z } from 'zod';

const OrderSchema = z.object({
  productId: z.string().uuid(),
  quantity: z.coerce.number().min(1)
});

export async function processOrder(prevState: any, formData: FormData) {
  const validated = OrderSchema.safeParse({
    productId: formData.get('productId'),
    quantity: formData.get('quantity')
  });

  if (!validated.success) {
    return { error: 'Date invalide trimise în formular' };
  }

  // Simulare salvare în baza de date pe server:
  await saveOrder(validated.data);

  redirect('/success');
}