📊 Capítulo 19: Server Actions & Cache no Next.js

Especialização em Frontend com React

🗺️ O Fluxo de Mutação e Revalidação com Server Actions

sequenceDiagram
    autonumber
    actor C as Cliente Web (<Form action={criarPost}>)
    participant SA as Server Action ('use server')
    participant DB as Prisma / Banco PostgreSQL
    participant NEXT as Next.js Cache (Data Cache / Router Cache)

    C->>SA: Submete FormData
    SA->>DB: INSERT INTO posts (...)
    DB-->>SA: Registro criado com sucesso
    SA->>NEXT: revalidatePath('/blog') / revalidateTag('posts')
    NEXT->>NEXT: Purga cache estático desatualizado
    SA-->>C: Retorna resposta com novo HTML já revalidado! ⚡

🎯 Slide 1: A Diretiva 'use server'

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

import { revalidatePath } from 'next/cache';

export async function adicionarProduto(formData: FormData) {
  const nome = formData.get('nome') as string;
  await db.produto.create({ data: { nome } });

  // Invalida o cache da rota instantaneamente:
  revalidatePath('/produtos');
}

🎯 Slide 2: As 4 Camadas de Cache do Next.js

1. Request Memoization: Deduping de chamadas fetch idênticas durante uma única renderização.
2. Data Cache: Cache persistente de dados entre múltiplos usuários e requisições.
3. Full Route Cache: Cache do HTML e payload RSC gerados no servidor.
4. Router Cache: Cache em memória no navegador do cliente durante a navegação.

🎯 Slide 3: Tag-Based Revalidation

• Com fetch(url, { next: { tags: ['pedidos'] } }), você pode invalidar todas as páginas que exibem pedidos usando apenas revalidateTag('pedidos') de qualquer lugar do código!