R
Interview Deckreact · next.js · senior/staff
✓ 0·⟳ 0·122
Next.js

Server Actions

Funções 'use server' que rodam no servidor mas podem ser chamadas direto do client — sem API routes.

Server Actions são funções marcadas com 'use server' que rodam no servidor. Podem ser passadas para forms (action={}) ou chamadas via JS de Client Components. Próximas a 'RPC' — eliminam a necessidade de API routes para mutações.

Problema
Criar API routes só para mutações simples (form submission, like, follow) é boilerplate desnecessário. Cliente precisa fetchar manualmente, gerenciar loading/error.
Solução
Server Actions: escreva uma função que roda no server, marque com 'use server', use direto em <form action={}> ou chame de Client Components. Next.js cuida da serialização e routing.
Tip
Server Actions têm CSRF protection automática no Next.js. Mas valide sempre os dados — o client envia tudo, inclusive campos manipulados.
// app/actions.ts
'use server';

export async function createPost(formData) {
  const title = formData.get('title');
  await db.posts.create({ title });
  revalidatePath('/posts');
}

// Uso direto em form
export default function NewPost() {
  return (
    <form action={createPost}>
      <input name="title" />
      <button>Criar</button>
    </form>
  );
}

// Uso em Client Component
'use client';
function Btn() {
  return <button onClick={() => createPost(formData)}>Like</button>;
}
Q.Server Action vs Route Handler?▾
A.Server Action: para mutações usadas apenas pelo seu app (tightly-coupled, segura). Route Handler: para APIs públicas, webhooks, integrações com terceiros, GET endpoints.
Q.Como invalidar cache após Server Action?▾
A.revalidatePath('/path') invalida o cache de uma página específica. revalidateTag('tag') invalida fetches com aquela tag. Combinado com fetch's next.tags, controle granular de cache.
Q.Server Actions podem retornar?▾
A.Sim, qualquer JSON serializável. Útil para retornar erros de validação, IDs criados, etc. O cliente recebe via async/await.
35/122← →