Server functions são uma forma de executar código no servidor sem precisar de um servidor personalizado. Eles permitem que você faça mutações no banco de dados, chame APIs externas, envie e-mails e muito mais. Neste artigo, vou explicar o que são server functions, como usá-los com Next.js e quais são as vantagens e desvantagens dessa abordagem.


O que são server functions?



Server functions são funções que são executadas no servidor em resposta a algum evento, como uma requisição HTTP, uma mudança no banco de dados ou um cron job. Eles são chamados de serverless porque você não precisa gerenciar um servidor para rodá-los. Em vez disso, você usa um provedor de cloud que se encarrega de escalar, provisionar e manter a infraestrutura necessária para executar suas funções.


Como usar server functions com Next.js?


Next.js é um framework para React que permite criar aplicações web híbridas, que combinam páginas estáticas, renderizadas no servidor e renderizadas no cliente. Next.js também integra com React Actions, uma solução integrada para mutações no servidor1.


Para usar server functions com Next.js, você pode definir suas funções em dois lugares:


Dentro do componente que as usa (apenas para componentes no servidor).

Em um arquivo separado (para componentes no cliente e no servidor), para reutilização.

Você pode definir várias funções no mesmo arquivo. Para criar uma função no servidor, você precisa definir uma função assíncrona com a diretiva “use server” no topo do corpo da função. Essa diretiva garante que essa função seja executada apenas no servidor. Essa função deve ter argumentos e um valor de retorno serializáveis.


Por exemplo, suponha que você queira criar uma função para adicionar um item ao carrinho de compras. Você pode fazer algo assim:



Se você quiser usar essa função em um componente no cliente, você precisa criar a função em um arquivo separado com a diretiva “use server” no topo do arquivo. Depois, você pode importar a função no seu componente:



Para invocar as funções no servidor, você pode usar os seguintes métodos:


Usando action: a propriedade action do React permite invocar uma função no servidor em um elemento <form>.

Usando formAction: a propriedade formAction do React permite manipular elementos <button>, <input type=“submit”> e <input type=“image”> em um <form>.

Invocação personalizada com startTransition: invocar funções no servidor sem usar action ou formAction usando startTransition.

Quais são as vantagens e desvantagens de usar server functions?


Algumas das vantagens de usar server functions são:


Você pode escrever código em JavaScript tanto no cliente quanto no servidor, sem precisar de outra linguagem ou framework.

Você pode aproveitar os recursos do Next.js, como roteamento, pré-renderização e otimização de código.

Você pode reduzir a complexidade e o custo da sua infraestrutura, delegando a responsabilidade de gerenciar o servidor para o provedor de cloud.

Você pode escalar sua aplicação de acordo com a demanda, sem se preocupar com limites de recursos ou gargalos de performance.

Algumas das desvantagens de usar server functions são:


Você pode ter menos controle sobre o ambiente de execução das suas funções, dependendo do provedor de cloud que você escolher.

Você pode ter dificuldades para depurar e testar suas funções, especialmente se elas interagirem com serviços externos ou bancos de dados.

Você pode enfrentar problemas de latência ou disponibilidade, se o provedor de cloud tiver falhas ou instabilidades.


Conclusão

Server functions são uma forma poderosa e conveniente de executar código no servidor sem precisar de um servidor personalizado. Eles permitem que você faça mutações no banco de dados, chame APIs externas, envie e-mails e muito mais. Com Next.js, você pode usar server functions de forma integrada com React Actions, criando aplicações web híbridas com páginas estáticas, renderizadas no servidor e renderizadas no cliente. No entanto, você também precisa estar ciente das limitações e desafios que essa abordagem pode trazer, como menor controle, dificuldade de depuração e teste, e possíveis problemas de latência e disponibilidade.


Espero que este artigo tenha sido útil para você entender o que são server functions e como usá-los com Next.js. Se você gostou, por favor, compartilhe com seus amigos. E se você tiver alguma dúvida ou sugestão, deixe um comentário abaixo. Obrigado pela leitura e até a próxima!