Implementação de sessão stateless para Next.js usando Server Actions

Introdução#

Após o muito celebrado lançamento do App Router, o Next.js introduziu outra funcionalidade, as Server Actions. Esta nova inovação facilita as manipulações de dados no lado do servidor, reduz a dependência de JavaScript no lado do cliente e melhora progressivamente formulários–tudo isso enquanto usa JavaScript e React para criar aplicações web robustas sem a necessidade de APIs REST tradicionais.

Neste artigo, exploramos as muitas vantagens proporcionadas por esta inovação e veremos na prática ao implementarmos uma sessão stateless baseada em cookies para o Next.js. Este texto serve como um guia passo a passo que irá acompanhá-lo em cada fase da criação de um projeto de demonstração usando o App Router.

Nossa demonstração prática pode ser facilmente implementada no Vercel usando o Edge Runtime. Pode descarregar o código-fonte completo a partir do GitHub.

Afastando-se das APIs REST#

Tradicionalmente, se quisermos criar uma aplicação web Next.js que consulta um banco de dados no backend, podemos criar algumas APIs REST para validar o estado de autenticação e consultar o banco de dados, então a aplicação React no front-end chamará essas APIs. Mas se não houver necessidade de abrir a API ao público e esta aplicação React for o único cliente, parece redundante usar APIs REST, pois elas só serão chamadas por nós mesmos.

Com as Server Actions, o componente React pode agora executar código do lado do servidor. Em vez de precisar criar manualmente um endpoint API, as Server Actions criam automaticamente um endpoint para o Next.js usar nos bastidores. Quando se chama uma Server Action, o Next.js envia um pedido POST para a página em que está com metadados sobre qual ação executar.

A necessidade de uma sessão stateless#

Como um framework preferido para criar aplicações stateless, o Next.js muitas vezes significa ser serverless, o que nos impede de usar a memória para armazenar os dados de sessão. As sessões tradicionais exigem o uso de um serviço de armazenamento externo, como Redis ou um banco de dados.

No entanto, quando os dados da sessão são suficientemente pequenos, temos uma alternativa: criar uma sessão stateless usando métodos de encriptação segura e cookies armazenados no lado do cliente. Este método evita a necessidade de armazenamento externo e mantém os dados de sessão descentralizados, oferecendo benefícios significativos em termos de carga do servidor e desempenho geral da aplicação.

Portanto, o nosso objetivo é uma sessão stateless leve e eficiente que aproveite a capacidade de armazenamento do lado do cliente, assegurando a segurança através de uma encriptação bem executada.

Implementação básica da sessão#

Primeiro, precisamos iniciar um novo projeto:

Para mais detalhes sobre a instalação, consulte o guia oficial.

Criando uma biblioteca de sessão#

Para facilitar o entendimento das Server Actions, vamos criar uma versão simplificada da sessão primeiro. Nesta versão, usaremos JSON para armazenar os dados da sessão em cookies.

Crie um arquivo chamado session/index.ts e inclua o seguinte código:

A primeira linha "use server" marca as funções deste arquivo como Server Actions.

Como não podemos aceder diretamente a request e response, usamos next/headers para ler e escrever cookies. Isto só está disponível em Server Actions.

Chegando: duas outras Server Actions#

Com a biblioteca de sessão em vigor, é hora de implementar uma funcionalidade de iniciar e encerrar sessão para mostrar a usabilidade da sessão.

Incorpore o seguinte código em user/index.ts:

Aqui, estamos usando um processo de "login fictício" que apenas exige um nome de utilizador.

Construindo a página#

No App Router, a página geralmente é um componente assíncrono, e Server Actions não podem ser chamadas diretamente de tal componente. Precisamos criar componentes usando "use client":

components/sign-in.tsx

components/sign-out.tsx

Finalmente, vamos construir a nossa app/page.tsx

Implementando encriptação#

O trabalho das Server Actions está concluído. Agora, a parte final envolve a implementação de encriptação que pode ser alcançada através de crypto.

Em seguida, modifique a biblioteca de sessões para implementar o seguinte:

Conclusão#

Parabéns! Tu implementaste com sucesso uma sessão stateless para Next.js. Aqui está uma pré-visualização online no Vercel, e podes descarregar o código-fonte completo aqui. Esperamos que este guia tenha ajudado na tua compreensão das novas Server Actions.

A seguir, exploraremos como usar as Server Actions para integrar Logto para Next.js. Fica atento!