Especialização Frontend com React & TypeScript • Demonstrações Práticas Executáveis

🎯 Contexto e Objetivo Prático

Server Actions com diretiva ‘use server’, validação de formulário com Zod no backend e revalidação de tags de cache.

💻 Código Fonte React 19 (TSX)

// app/actions/products.ts
"use server";

import { revalidateTag } from "next/cache";
import { z } from "zod";

const ProductSchema = z.object({
  name: z.string().min(3),
  price: z.coerce.number().positive()
});

export async function createProductAction(prevState: any, formData: FormData) {
  const parsed = ProductSchema.safeParse({
    name: formData.get("name"),
    price: formData.get("price")
  });

  if (!parsed.success) {
    return { success: false, errors: parsed.error.flatten().fieldErrors };
  }

  // Persistência direta no banco de dados corporativo
  console.log("[DB] Inserindo produto:", parsed.data);

  // Invalida o cache das páginas que exibem produtos
  revalidateTag("products-cache");

  return { success: true, message: "Produto cadastrado com sucesso!" };
}

🖥️ Saída de Renderização Visual e Comportamento

[Execução Segura no Servidor via POST RPC]
POST /dashboard (Server Action: createProductAction)
Validação Zod OK -> Invalidação da tag 'products-cache' -> Atualização atômica.