Aprimoramento progressivo com Ações do servidor

O aprimoramento progressivo é uma estratégia de desenvolvimento web na qual se começa com uma base funcional em HTML e se adicionam recursos de JavaScript sobre ela. A funcionalidade essencial funciona para todos os usuários, inclusive aqueles que desativaram o JavaScript, têm conexões lentas ou usam tecnologias assistivas, enquanto os usuários com JavaScript habilitado obtêm uma experiência aprimorada.

Um formulário com action={serverAction} funciona como um POST HTML de página inteira mesmo sem JS. O navegador envia o formulário, o servidor executa a ação e retorna uma página HTML atualizada. Esse é o mesmo mecanismo que dá suporte aos formulários web desde 1995 — as ações do servidor do React são compatíveis com ele por design.

Quando não há JS, a validação precisa acontecer no servidor. A ação do servidor valida os dados do formulário e, se a validação falhar, retorna o estado de erro. O servidor renderiza novamente a página com as mensagens de erro incorporadas ao HTML. O usuário vê os erros sem que nenhum JavaScript do cliente seja executado.

Quando o React hidrata a página, ele intercepta os envios de formulário e os trata como chamadas assíncronas de ações do servidor, em vez de POSTs de página inteira. O usuário obtém uma atualização no próprio local, sem recarregar a página, um estado de processamento pendente visível e uma interface otimista — tudo isso sem alterar a ação ou a estrutura subjacente do formulário.

O servidor renderiza o formulário com o estado inicial incorporado ao HTML. Quando o React hidrata a página, ele aproveita esse estado inicial sem causar qualquer oscilação visual ou incompatibilidade. O hook useActionState foi projetado para reconciliar de forma adequada o estado inicial renderizado pelo servidor com a hidratação do cliente.

As transições do React permitem que a interface continue interativa durante uma chamada de ação do servidor. Envolver o envio do formulário em uma transição permite que o React dê menor prioridade à ida e volta ao servidor e mantenha a página responsiva. É isso que faz a experiência aprimorada com JS parecer significativamente mais rápida do que um recarregamento de página inteira.

Sem JavaScript: o usuário clica em enviar, o navegador envia um POST completo e o servidor responde com uma nova página HTML (incluindo um breve clarão branco e a redefinição da rolagem). Com JavaScript: o React intercepta o envio, a ação é executada de forma assíncrona e somente as partes alteradas da página são atualizadas no próprio local — sem clarão e sem redefinir a rolagem.

O aprimoramento progressivo beneficia os rastreadores de mecanismos de busca, que talvez não executem JavaScript. Uma página de pesquisa ou filtragem baseada em formulário que funcione como um formulário HTML de página inteira pode ser indexada e rastreada. Resultados renderizados no servidor fazem com que o rastreador veja conteúdo real, e não elementos div vazios aguardando JavaScript.

Leitores de tela e tecnologias assistivas funcionam melhor com HTML semântico. Um formulário aprimorado progressivamente usa elementos reais <form>, <input> e <button>, que as tecnologias assistivas entendem de forma nativa. O JavaScript adiciona regiões dinâmicas ARIA para anunciar erros, aprimorando a base acessível em vez de substituí-la.

Em redes não confiáveis, os pacotes de JavaScript podem não ser carregados. Uma página aprimorada progressivamente ainda funciona para o caso de uso básico. Essa resiliência é especialmente importante para usuários de conexões móveis em áreas com cobertura ruim ou em regiões onde as condições da rede variam muito.

O aprimoramento progressivo é mais valioso para formulários voltados ao público, como cadastro, contato, pesquisa e finalização de compra. Painéis internos com interatividade complexa talvez não precisem dele. Aplique-o intencionalmente quando o maior alcance e a confiabilidade forem importantes, como em páginas de marketing, comércio eletrônico e fluxos de integração de novos usuários.

Qual é o princípio central do aprimoramento progressivo?

O aprimoramento progressivo significa que o formulário funciona como um POST HTML simples sem JavaScript. As ações do servidor oferecem suporte nativo a isso: action={serverAction} habilita o envio por POST de página inteira. Em seguida, a hidratação do React transforma o formulário em atualizações assíncronas no próprio local, com estados pendentes. Essa abordagem beneficia a acessibilidade, a otimização para mecanismos de busca e os usuários com baixa conectividade, sem deixar de oferecer uma experiência rica com JavaScript.