NextJs: Server Functions

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!