Implementar sesión sin estado para Next.js usando Server Actions

Introducción#

Tras el lanzamiento tan celebrado de App Router, Next.js introdujo otra característica, Server Actions. Esta nueva innovación facilita las manipulaciones de datos del lado del servidor, reduce la dependencia en JavaScript del lado del cliente y mejora progresivamente los formularios, todo mientras se usa JavaScript y React para crear aplicaciones web robustas sin la necesidad de APIs REST tradicionales.

En este artículo, aprovechamos la abundancia de ventajas que ofrece esta innovación y la vemos en acción mientras implementamos una sesión sin estado basada en cookies para Next.js. Esta pieza sirve como una guía paso a paso que te llevará a través de cada fase de la creación de un proyecto demo usando el App Router.

Nuestra demostración práctica se puede desplegar rápidamente en Vercel usando Edge Runtime. Y puedes descargar el código fuente completo desde GitHub.

Alejándonos de las APIs REST#

Tradicionalmente, si queremos crear una aplicación web en Next.js que consulte bases de datos en el backend, podemos crear algunas APIs REST para validar el estado de autenticación y consultar la base de datos, luego la aplicación React del front-end llamará a estas APIs. Pero si no es necesario abrir la API al público y esta aplicación React es el único cliente, parece redundante usar APIs REST ya que solo serán llamadas por nosotros mismos.

Con Server Actions, el componente React ahora puede ejecutar código del lado del servidor. En lugar de necesitar crear manualmente un endpoint de API, Server Actions crea automáticamente un endpoint para que Next.js lo use en segundo plano. Al llamar a una Server Action, Next.js envía una solicitud POST a la página en la que estás con metadatos para indicar qué acción ejecutar.

La necesidad de una sesión sin estado#

Como un framework preferido para crear aplicaciones sin estado, Next.js a menudo implica serverless, en el cual no podemos usar la memoria para almacenar datos de sesión. Las sesiones tradicionales requieren el uso de un servicio de almacenamiento externo, como Redis o una base de datos.

Sin embargo, cuando los datos de la sesión permanecen lo suficientemente pequeños, tenemos un camino alternativo: diseñar una sesión sin estado usando métodos de encriptación seguros y cookies almacenadas en el lado del cliente. Este método evita la necesidad de almacenamiento externo y mantiene los datos de la sesión descentralizados, ofreciendo beneficios sustanciales en cuanto a la carga del servidor y el rendimiento general de la aplicación.

Así que nuestro objetivo es una sesión sin estado ligera y eficiente que aproveche la capacidad de almacenamiento del lado del cliente mientras garantiza la seguridad a través de una encriptación bien ejecutada.

Implementación básica de la sesión#

Primero, necesitamos iniciar un nuevo proyecto:

Para más detalles sobre la instalación, consulta la guía oficial.

Creando una biblioteca de sesión#

Para facilitar la comprensión de Server Actions, primero crearemos una versión simplificada de la sesión. En esta versión, usaremos JSON para almacenar datos de sesión en cookies.

Crea un archivo llamado session/index.ts e incluye el siguiente código:

La primera línea "use server" marca las funciones de este archivo como Server Actions.

Como no podemos acceder directamente a request y response, usamos next/headers para leer y escribir cookies. Esto solo está disponible en Server Actions.

Llegando: dos más Server Actions#

Con la biblioteca de sesión en su lugar, es hora de implementar una función de inicio y cierre de sesión para mostrar la usabilidad de la sesión.

Incorpora el siguiente código en user/index.ts:

Aquí, estamos usando un proceso de inicio de sesión 'ficticio' que solo requiere un nombre de usuario.

Construyendo la página#

En App Router, la página generalmente es un componente asincrónico, y Server Actions no se pueden invocar directamente desde dicho componente. Necesitamos crear componentes usando "use client":

components/sign-in.tsx

components/sign-out.tsx

Finalmente, construyamos nuestro app/page.tsx

Implementando la encriptación#

El trabajo de Server Actions está hecho. Ahora, la parte final implica la implementación de la encriptación que se puede lograr a través de crypto.

A continuación, modifica la biblioteca de sesión para implementar lo siguiente:

Conclusión#

¡Felicidades! Has implementado con éxito una sesión sin estado para Next.js. Aquí tienes una vista previa en Vercel, y puedes descargar el código fuente completo aquí. Esperamos que esta guía te ayude a entender las nuevas Server Actions.

A continuación, exploraremos cómo usar Server Actions para integrar Logto para Next.js. ¡Mantente al tanto!