Implementando uma sessão sem estado para Next.js usando Server Actions

Introdução#

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

Neste artigo, exploramos as vantagens oferecidas por essa inovação e a colocamos em prática ao implementarmos uma sessão sem estado baseada em cookies para o Next.js. Este guia passo a passo irá te conduzir por cada fase da criação de um projeto demo usando o App Router.

Nossa demonstração prática pode ser facilmente implantada no Vercel usando Edge Runtime. E você pode baixar o código-fonte completo no GitHub.

Afastando-se das APIs REST#

Tradicionalmente, se quisermos criar um aplicativo web com 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 o aplicativo React no front-end chamará essas APIs. Mas se não houver necessidade de abrir a API ao público e esse aplicativo React for o único cliente, parece redundante usar APIs REST, pois elas serão chamadas apenas por nós mesmos.

Com as Server Actions, o componente React agora pode executar código no lado do servidor. Em vez de precisar criar manualmente um endpoint API, as Server Actions criam automaticamente um endpoint para o Next.js usar em segundo plano. Ao chamar uma Server Action, o Next.js envia uma solicitação POST para a página em que você está com os metadados da ação que deve ser executada.

A necessidade de uma sessão sem estado#

Como um framework preferido para criar aplicações sem estado, o Next.js geralmente significa serverless, no qual não podemos usar a memória para armazenar dados de sessão. Sessões tradicionais requerem o uso de um serviço de armazenamento externo, como Redis ou um banco de dados.

No entanto, quando os dados da sessão permanecem pequenos o suficiente, temos um caminho alternativo: projetar uma sessão sem estado usando métodos de criptografia seguros e cookies armazenados no lado do cliente. Este método elimina a necessidade de armazenamento externo e mantém os dados da sessão descentralizados, oferecendo benefícios não triviais em termos de carga do servidor e desempenho geral da aplicação.

Nosso objetivo é uma sessão sem estado leve e eficiente que aproveite a capacidade de armazenamento no lado do cliente enquanto garante segurança por meio de criptografia bem executada.

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

Primeiramente, 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, criaremos uma versão simplificada da sessão primeiro. Nesta versão, usaremos JSON para armazenar os dados da sessão nos 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 acessar request e response diretamente, usamos next/headers para ler e escrever cookies. Isso só está disponível em Server Actions.

Chegando: mais duas Server Actions#

Com a biblioteca de sessão pronta, é hora de implementar um recurso de login e logout 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 exige apenas um nome de usuário.

Construindo a página#

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

components/sign-in.tsx

components/sign-out.tsx

Finalmente, vamos construir nosso app/page.tsx

Implementando a criptografia#

O trabalho das Server Actions está concluído. Agora, a parte final envolve a implementação da criptografia, que pode ser realizada por meio de crypto.

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

Conclusão#

Parabéns! Você implementou com sucesso uma sessão sem estado para o Next.js. Aqui está uma visualização online no Vercel, e você pode baixar o código-fonte completo aqui. Esperamos que este guia ajude na compreensão das novas Server Actions.

Em seguida, exploraremos como usar as Server Actions para integrar o Logto com o Next.js. Fique ligado!