React Server Actions: Processamento Simplificado de Formulários no Lado do Servidor

React Server Actions, introduzido no React 18 e significativamente aprimorado no Next.js, oferece uma abordagem revolucionária para lidar com envios de formulários e mutações de dados diretamente no servidor. Este poderoso recurso simplifica o processo de desenvolvimento, aumenta a segurança e melhora o desempenho em comparação com a busca e manipulação de dados tradicionais do lado do cliente.

O que são React Server Actions?

Server Actions são funções assíncronas que são executadas no servidor e podem ser invocadas diretamente de componentes React. Elas permitem que você execute tarefas do lado do servidor, como:

• Envio de Formulários: Processe dados de formulário com segurança no servidor.
• Mutações de Dados: Atualize bancos de dados ou APIs externas.
• Autenticação: Lide com logins e registros de usuários.
• Lógica do Lado do Servidor: Execute lógica de negócios complexa sem expô-la ao cliente.

A principal vantagem das Server Actions é que elas permitem que você escreva código do lado do servidor dentro de seus componentes React, eliminando a necessidade de rotas de API separadas e lógica complexa de busca de dados do lado do cliente. Essa co-localização da UI e da lógica do lado do servidor leva a uma base de código mais sustentável e eficiente.

Benefícios de Usar React Server Actions

Usar React Server Actions oferece vários benefícios significativos:

Desenvolvimento Simplificado

Server Actions reduzem o código boilerplate, permitindo que você lide com envios de formulários e mutações de dados diretamente em seus componentes React. Isso elimina a necessidade de endpoints de API separados e lógica complexa de busca de dados do lado do cliente, simplificando o processo de desenvolvimento e tornando seu código mais fácil de entender e manter. Considere um formulário de contato simples. Sem Server Actions, você precisaria de uma rota de API separada para lidar com o envio do formulário, JavaScript do lado do cliente para enviar os dados e lógica de tratamento de erros tanto no cliente quanto no servidor. Com Server Actions, tudo isso pode ser tratado dentro do próprio componente.

Segurança Aprimorada

Ao executar código no servidor, Server Actions reduzem a superfície de ataque do seu aplicativo. Dados confidenciais e lógica de negócios são mantidos longe do cliente, impedindo que usuários mal-intencionados os adulterem. Por exemplo, credenciais de banco de dados ou chaves de API nunca são expostas no código do lado do cliente. Todas as interações com o banco de dados acontecem no servidor, mitigando o risco de injeção de SQL ou acesso não autorizado aos dados.

Desempenho Melhorado

Server Actions podem melhorar o desempenho, reduzindo a quantidade de JavaScript que precisa ser baixada e executada no cliente. Isso é particularmente benéfico para usuários em dispositivos de baixa potência ou com conexões de internet lentas. O processamento de dados acontece no servidor e apenas as atualizações de UI necessárias são enviadas ao cliente, resultando em carregamentos de página mais rápidos e uma experiência de usuário mais suave.

Atualizações Otimistas

Server Actions se integram perfeitamente com Suspense e Transitions do React, permitindo atualizações otimistas. Atualizações otimistas permitem que você atualize a UI imediatamente, mesmo antes que o servidor tenha confirmado a ação. Isso proporciona uma experiência de usuário mais responsiva e envolvente, pois os usuários não precisam esperar que o servidor responda antes de ver os resultados de suas ações. No e-commerce, adicionar um item a um carrinho de compras pode ser exibido imediatamente enquanto o servidor confirma a adição em segundo plano.

Aprimoramento Progressivo

Server Actions suportam aprimoramento progressivo, o que significa que seu aplicativo ainda pode funcionar mesmo se o JavaScript estiver desativado ou falhar ao carregar. Quando o JavaScript está desativado, os formulários serão enviados como formulários HTML tradicionais, e o servidor lidará com o envio e redirecionará o usuário para uma nova página. Isso garante que seu aplicativo permaneça acessível a todos os usuários, independentemente da configuração do navegador ou das condições da rede. Isso é especialmente importante para acessibilidade e SEO.

Como Usar React Server Actions

Para usar React Server Actions, você precisará estar usando um framework que os suporte, como o Next.js. Aqui está um guia passo a passo:

1. Defina a Server Action

Crie uma função assíncrona que será executada no servidor. Esta função deve lidar com a lógica que você deseja executar no servidor, como atualizar um banco de dados ou chamar uma API. Marque a função com a diretiva `"use server"` na parte superior para indicar que é uma Server Action. Esta diretiva diz ao compilador React para tratar a função como uma função do lado do servidor e para lidar automaticamente com a serialização e desserialização de dados entre o cliente e o servidor.

            // app/actions.js
'use server'

import { revalidatePath } from 'next/cache';
import { saveMessage } from './db';

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    await saveMessage(message);
    revalidatePath('/'); // Clear the route cache
    return { message: 'Message saved successfully!' };
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

Explicação:

• A diretiva `'use server'` marca esta função como uma Server Action.
• `revalidatePath('/')` limpa o cache da rota, garantindo que os dados atualizados sejam buscados na próxima requisição. Isso é crucial para manter a consistência dos dados.
• `saveMessage(message)` é um espaço reservado para sua lógica real de interação com o banco de dados. Assume que você tem uma função `saveMessage` definida em outro lugar para lidar com o salvamento da mensagem em seu banco de dados.
• A função retorna um objeto de estado que pode ser usado para exibir feedback ao usuário.

2. Importe e Use a Server Action em Seu Componente

Importe a Server Action em seu componente React e use-a como a prop `action` em um elemento de formulário. O hook `useFormState` pode ser usado para gerenciar o estado do formulário e exibir feedback ao usuário.

            // app/page.jsx
'use client';

import { useFormState } from 'react-dom';
import { createMessage } from './actions';

export default function Home() {
  const [state, formAction] = useFormState(createMessage, {message: ''});

  return (
    

      Message:
      
      Submit
      {state?.message && 
{state.message}
}
    
  );
}
            

              
                Copy
              
            
          

Explicação:

• A diretiva `'use client'` especifica que este é um Componente Cliente (já que está usando `useFormState`).
• `useFormState(createMessage, {message: ''})` inicializa o estado do formulário com a Server Action `createMessage`. O segundo argumento é o estado inicial.
• A prop `action` do elemento `form` é definida para `formAction` retornada por `useFormState`.
• A variável `state` contém o valor de retorno da Server Action, que pode ser usado para exibir feedback ao usuário.

3. Lidar com Dados do Formulário

Dentro da Server Action, você pode acessar os dados do formulário usando a API `FormData`. Esta API fornece uma maneira conveniente de acessar os valores dos campos do formulário.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  // ...
}
            

              
                Copy
              
            
          

4. Lidar com Erros

Use blocos `try...catch` para lidar com erros que podem ocorrer durante a execução da Server Action. Retorne uma mensagem de erro no objeto de estado para exibi-la ao usuário.

            'use server'

export async function createMessage(prevState, formData) {
  const message = formData.get('message');

  try {
    // ...
  } catch (e) {
    return { message: 'Failed to save message' };
  }
}
            

              
                Copy
              
            
          

5. Revalidar Dados

Depois que uma Server Action tiver mutado dados com sucesso, pode ser necessário revalidar o cache de dados para garantir que a UI reflita as últimas alterações. Use as funções `revalidatePath` ou `revalidateTag` de `next/cache` para revalidar caminhos ou tags específicos.

            'use server'

import { revalidatePath } from 'next/cache';

export async function createMessage(prevState, formData) {
  // ...
  revalidatePath('/'); // Clear the route cache
  // ...
}
            

              
                Copy
              
            
          

Uso Avançado

Mutando Dados

Server Actions são particularmente adequadas para mutar dados, como atualizar bancos de dados ou APIs externas. Você pode usar Server Actions para lidar com mutações de dados complexas que exigem lógica do lado do servidor, como validar dados, realizar cálculos ou interagir com várias fontes de dados. Considere um cenário em que você precisa atualizar o perfil de um usuário e enviar um e-mail de confirmação. Uma Server Action pode lidar tanto com a atualização do banco de dados quanto com o processo de envio de e-mail em uma única operação atômica.

Autenticação e Autorização

Server Actions podem ser usadas para lidar com autenticação e autorização. Ao realizar verificações de autenticação e autorização no servidor, você pode garantir que apenas usuários autorizados tenham acesso a dados e funcionalidades confidenciais. Você pode usar Server Actions para lidar com logins de usuários, registro e redefinição de senha. Por exemplo, uma Server Action pode verificar as credenciais do usuário em um banco de dados e retornar um token que pode ser usado para autenticar solicitações subsequentes.

Funções de Borda

Server Actions podem ser implantadas como Funções de Borda, que são executadas em uma rede global de servidores próximos aos seus usuários. Isso pode reduzir significativamente a latência e melhorar o desempenho, especialmente para usuários em locais geograficamente dispersos. As Funções de Borda são ideais para lidar com Server Actions que exigem baixa latência, como atualizações de dados em tempo real ou entrega de conteúdo personalizado. O Next.js oferece suporte integrado para implantar Server Actions como Funções de Borda.

Streaming

Server Actions suportam streaming, o que permite que você envie dados para o cliente em partes à medida que se tornam disponíveis. Isso pode melhorar o desempenho percebido do seu aplicativo, especialmente para Server Actions que levam muito tempo para serem executadas. O streaming é particularmente útil para lidar com grandes conjuntos de dados ou cálculos complexos. Por exemplo, você pode transmitir resultados de pesquisa para o cliente à medida que são recuperados do banco de dados, proporcionando uma experiência de usuário mais responsiva.

Melhores Práticas

Aqui estão algumas práticas recomendadas a serem seguidas ao usar React Server Actions:

• Mantenha as Server Actions pequenas e focadas: Cada Server Action deve executar uma única tarefa bem definida. Isso torna seu código mais fácil de entender, testar e manter.
• Use nomes descritivos: Escolha nomes que indiquem claramente o propósito da Server Action. Por exemplo, `createComment` ou `updateUserProfile` são melhores do que nomes genéricos como `processData`.
• Valide os dados no servidor: Sempre valide os dados no servidor para impedir que usuários mal-intencionados injetem dados inválidos em seu aplicativo. Isso inclui validar tipos de dados, formatos e intervalos.
• Lidar com erros de forma elegante: Use blocos `try...catch` para lidar com erros e fornecer mensagens de erro informativas ao usuário. Evite expor informações de erro confidenciais ao cliente.
• Use atualizações otimistas: Forneça uma experiência de usuário mais responsiva, atualizando a UI imediatamente, mesmo antes que o servidor tenha confirmado a ação.
• Revalidar dados conforme necessário: Garanta que a UI reflita as últimas alterações revalidando o cache de dados após uma Server Action ter mutado dados.

Exemplos do Mundo Real

Vamos considerar alguns exemplos do mundo real de como React Server Actions pode ser usado em diferentes tipos de aplicativos:

Aplicativo de E-commerce

• Adicionando um item ao carrinho de compras: Uma Server Action pode lidar com a adição de um item ao carrinho de compras do usuário e atualizar o total do carrinho no banco de dados. Atualizações otimistas podem ser usadas para exibir imediatamente o item no carrinho.
• Processando um pagamento: Uma Server Action pode lidar com o processamento de um pagamento usando um gateway de pagamento de terceiros. A Server Action também pode atualizar o status do pedido no banco de dados e enviar um e-mail de confirmação ao usuário.
• Enviando uma avaliação de produto: Uma Server Action pode lidar com o envio de uma avaliação de produto e salvá-la no banco de dados. A Server Action também pode calcular a classificação média do produto e atualizar a página de detalhes do produto.

Aplicativo de Mídia Social

• Postando um novo tweet: Uma Server Action pode lidar com a postagem de um novo tweet e salvá-lo no banco de dados. A Server Action também pode atualizar a linha do tempo do usuário e notificar seus seguidores.
• Curtindo uma postagem: Uma Server Action pode lidar com a curtida de uma postagem e atualizar a contagem de curtidas no banco de dados. Atualizações otimistas podem ser usadas para exibir imediatamente a contagem de curtidas atualizada.
• Seguindo um usuário: Uma Server Action pode lidar com o seguimento de um usuário e atualizar as contagens de seguidores e seguindo no banco de dados.

Sistema de Gerenciamento de Conteúdo (CMS)

• Criando uma nova postagem de blog: Uma Server Action pode lidar com a criação de uma nova postagem de blog e salvá-la no banco de dados. A Server Action também pode gerar um slug para a postagem e atualizar o sitemap.
• Atualizando uma página: Uma Server Action pode lidar com a atualização de uma página e salvá-la no banco de dados. A Server Action também pode revalidar o cache da página para garantir que o conteúdo atualizado seja exibido aos usuários.
• Publicando uma alteração: Uma Server Action pode lidar com a publicação de uma alteração no banco de dados e notificar todos os assinantes.

Considerações de Internacionalização

Ao desenvolver aplicativos para um público global, é essencial considerar a internacionalização (i18n) e a localização (l10n). Aqui estão algumas considerações para usar React Server Actions em aplicativos internacionalizados:

• Lidar com diferentes formatos de data e hora: Use a API `Intl` para formatar datas e horas de acordo com a localidade do usuário.
• Lidar com diferentes formatos de número: Use a API `Intl` para formatar números de acordo com a localidade do usuário.
• Lidar com diferentes moedas: Use a API `Intl` para formatar moedas de acordo com a localidade do usuário.
• Traduzir mensagens de erro: Traduza mensagens de erro para o idioma do usuário.
• Suportar idiomas da direita para a esquerda (RTL): Garanta que seu aplicativo suporte idiomas RTL, como árabe e hebraico.

Por exemplo, ao processar um formulário que requer uma entrada de data, uma Server Action pode usar a API `Intl.DateTimeFormat` para analisar a data de acordo com a localidade do usuário, garantindo que a data seja interpretada corretamente, independentemente das configurações regionais do usuário.

Conclusão

React Server Actions são uma ferramenta poderosa para simplificar o processamento de formulários do lado do servidor e mutações de dados em aplicativos React. Ao permitir que você escreva código do lado do servidor diretamente em seus componentes React, Server Actions reduzem o código boilerplate, aumentam a segurança, melhoram o desempenho e habilitam atualizações otimistas. Ao seguir as práticas recomendadas descritas neste guia, você pode aproveitar as Server Actions para criar aplicativos React mais robustos, escaláveis e sustentáveis. À medida que o React continua a evoluir, as Server Actions, sem dúvida, desempenharão um papel cada vez mais importante no futuro do desenvolvimento web.