Usando a nova funcionalidade Server Actions do Next.js para implementar sessão stateless baseada em cookies e experimentar os benefícios do Server Actions.
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.
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.
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.
Primeiro, precisamos iniciar um novo projeto:
Para mais detalhes sobre a instalação, consulte o guia oficial.
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.
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.
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
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:
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!