M

MLOG

Português

Explore React Server Actions, um recurso poderoso para lidar com envios de formulários e mutações de dados diretamente no servidor, simplificando o desenvolvimento React e aumentando a segurança.

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:

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' };
  }
}

Explicação:

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 (
    

      
      
      
      {state?.message && 
{state.message}
}
    

  );
}

Explicação:

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');

  // ...
}

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' };
  }
}

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
  // ...
}

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:

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

Aplicativo de Mídia Social

Sistema de Gerenciamento de Conteúdo (CMS)

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:

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.