Especialização Frontend com React & TypeScript • React 19, Hooks, Estado Global e Next.js

🗺️ Mapa Conceitual do Tópico

flowchart TD
    CLIENT["Navegador: Chama Server Action"] --> POST["POST RPC Seguro em Background"]
    POST --> BACKEND["Executa mutação no Servidor"]
    BACKEND --> REVALIDATE["revalidateTag('produtos')"]
    REVALIDATE --> PURGE["Purga cache da CDN e atualiza interface atômica"]

🏛️ 1. Server Actions: Mutações Seguras de Ponta a Ponta

As Server Actions no Next.js permitem que componentes invoquem funções assíncronas que executam exclusivamente no servidor, eliminando a necessidade de criar e manter endpoints manuais de API REST para simples operações de CRUD.

Ao anotar uma função com a diretiva 'use server', o framework cria automaticamente um endpoint POST seguro com proteção contra ataques de CSRF.

🔄 2. As Camadas Estratégicas de Cache no Next.js

O Next.js implementa uma arquitetura de cache de 4 camadas:

  1. Request Memoization: Deduplica requisições fetch com a mesma URL durante a mesma renderização.
  2. Data Cache: Persiste dados buscados entre requisições de múltiplos usuários no servidor.
  3. Full Route Cache: Armazena o HTML e o payload RSC de rotas estáticas na build.
  4. Router Cache: Cache no navegador do cliente para navegação instantânea.

🏷️ 3. Invalidação Granular com revalidateTag e revalidatePath

Ao alterar dados no banco de dados através de uma Server Action, o cache do Next.js deve ser invalidado para que a interface reflita o novo estado:

"use server";
import { revalidateTag } from "next/cache";

export async function salvarProduto(dados: FormData) {
  await db.produto.create({ data: ... });
  revalidateTag("catalogo-produtos"); // Atualiza apenas o cache desta tag!
}

⚠️ 4. Armadilhas Comuns e Anti-Padrões de Produção

  1. Falta de Validação em Server Actions: Server Actions são endpoints públicos da internet! Nunca confie cegamente nos dados de FormData. Sempre valide os tipos com Zod antes de persistir no banco.
  2. Vazamento de Dados em Respostas: Retornar instâncias de entidades brutas com senhas hash ou metadados de auditoria interna nas Server Actions expõe dados sensíveis no tráfego RPC.

💡 5. Diretrizes de Engenharia (Meta & React Docs)

  • Adote Metadata API para SEO Perfeito: Exporte objetos metadata ou funções generateMetadata dinâmicas para gerar tags OpenGraph e Twitter Cards sob demanda.
  • Prefira revalidateTag a revalidatePath: A invalidação baseada em tags é semântica e desacoplada da estrutura de rotas da aplicação.

💻 6. Demonstração Arquitetural do Conceito

// actions/userActions.ts - Server Action com Zod e revalidação
"use server";

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

const UserInputSchema = z.object({
  email: z.string().email(),
  role: z.enum(["admin", "user"])
});

export async function registerUserAction(formData: FormData) {
  const result = UserInputSchema.safeParse({
    email: formData.get("email"),
    role: formData.get("role")
  });

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

  // Persiste no banco de dados corporativo
  revalidateTag("users-list");
  return { success: true };
}

📋 7. Cheat-Sheet de Caching e Invalidação

  • fetch(url, { cache: 'no-store' }): Força busca dinâmica a cada requisição (SSR puro).
  • fetch(url, { next: { revalidate: 60 } }): Revalidação incremental (ISR) a cada 60 segundos.
  • revalidateTag(tag): Purga o cache associado à tag sob demanda.

🔍 8. Diagnóstico de Performance & React DevTools Profiler

Validação de Headers de Cache:

  • Verificação de HIT/MISS: Inspecione os headers HTTP x-nextjs-cache no Chrome DevTools: HIT indica dado servido instantaneamente da memória, e STALE indica revalidação assíncrona em background (SWR).

🧪 9. Casos de Teste e Cenários de Borda Recomendados

  • 🔍 Invalidação de Tag Inexistente: Assegure que invocar revalidateTag() com identificador incorreto não derrube o worker Node.js.
  • 🔍 CSRF Protection: Valide se o Next.js rejeita invocações de Server Actions com headers de origem adulterados.
  • 🔍 Concorrência de Mutações: Simule múltiplos usuários submetendo formulários simultaneamente com a mesma tag de cache.