Qué, cuándo, por qué y cómo de la nueva función de middleware de Next.js

Patrones de diseño de interfaces inteligentes, vídeo de 10h + formación UX

Planificación y proceso del sistema de diseño, con Nathan Curtis

Índice

¿Qué pasa con las rutas API?
¿Cuándo debo utilizar middleware?
Las limitaciones del middleware
Implementación de software intermedio

La reciente versión 12.0 de Next.js incluyó una nueva característica beta: middleware. Para obtener una explicación detallada, puede leer todo al respecto en el artículo anterior de Sam, " Subdominios comodín Next.js ". Este artículo, por otro lado, profundiza en el concepto general de middleware y en lo útil que puede resultar a la hora de crear cosas.

“Middleware” no es un término nuevo en informática. A menudo se utiliza como término para describir una pieza de software que mantiene unidos dos sistemas. Se podría llamar "pegamento" para el software y, esencialmente, así es como funciona el middleware de Next.js.

El middleware de Next.js le permite crear funciones que se ejecutan después de que se realiza la solicitud de un usuario y antes de que se complete la solicitud, en medio de los dos procesos. Esto le permite procesar la solicitud de un usuario y luego modificar la respuesta reescribiendo, redirigiendo, modificando encabezados o incluso transmitiendo HTML.

Dentro de Next.js, el middleware opera en un tiempo de ejecución limitado descrito como "Edge Runtime". El código que se ejecutó durante el tiempo de ejecución tiene acceso a un conjunto de API web estándar, que se analizarán más adelante en el artículo. Para los clientes de Vercel, las funciones de middleware se ejecutarán como Vercel Edge Functions .

¿Qué pasa con las rutas API?

Al leer este artículo, es posible que esté pensando en cómo el middleware se parece muchísimo a las rutas API de Next.js que existen desde hace un tiempo. La diferencia clave es cómo se usan: en el tiempo de ejecución más restringido de las funciones de middleware, las solicitudes individuales se realizan a rutas API, mientras que las funciones de Middleware operan entre la solicitud de un usuario a una página y la presentación de esa página.

Esto también significa que el middleware puede abarcar varias páginas, lo que le permite evitar la repetición de código. Por ejemplo, si necesita cambiar cada página del appdirectorio en función de si un usuario ha iniciado sesión, puede crear una función de middleware dentro de ese directorio para procesar las cookies de los usuarios para ver si han iniciado sesión y luego pasar esa información. en la página. En comparación, lograr un efecto similar requeriría código adicional dentro de una ruta API.

La principal diferencia técnica entre los dos es que las rutas API de Next.js se diseñaron para alojarse en un servidor de un solo nodo alojado en un solo lugar, mientras que las funciones de middleware están diseñadas para implementarse en el "borde", que es esencialmente un término de marketing. para implementar código en múltiples ubicaciones alrededor del mundo. Además de la diferencia en la distancia física, el "borde" se asocia comúnmente con un almacenamiento en caché agresivo y una invalidación de caché eficiente que reduce el cálculo innecesario.

El objetivo de esto es la velocidad. La respuesta de un servidor generalmente llega más rápido cuando el usuario está más cerca del servidor, por lo que cuando tiene un solo servidor, esas velocidades solo son accesibles para un subconjunto de sus usuarios. Sin embargo, al implementar su código en varias ubicaciones, más usuarios tendrán acceso a respuestas rápidas.

Por último, el middleware está diseñado para no tener tiempo de arranque en frío. El tiempo de inicio de una ruta API es una causa importante de respuestas lentas. En Vercel, las funciones sin servidor (que se utilizan para implementar rutas API) normalmente tardan alrededor de 250 milisegundos en iniciarse. El middleware también está diseñado para iniciarse en mucho menos tiempo que las rutas API; Vercel afirma que sus funciones Edge (que se utilizan para implementar Next.js Middleware) tienen un "inicio 100 veces más rápido" que sus funciones sin servidor.

¿Cuándo debo utilizar middleware?

El middleware debe usarse en los casos en los que se requiere una pequeña cantidad de procesamiento, esto se debe a que el middleware debe devolver una respuesta en menos de 1,5 segundos; de lo contrario, la solicitud expirará.

Geolocalización

El NextRequestobjeto que está disponible dentro del Middleware tiene información geográfica disponible en la geoclave. Con esta información, podrá reescribir su usuario en páginas con información localizada. Por ejemplo, si estuviera creando un sitio para una cadena global de restaurantes, podría mostrar un menú diferente según la ubicación del usuario. El ejemplo de Vercel aquí utiliza esta geolocalización para proporcionar precios de paridad de energía.

Esto puede funcionar junto con la función de localización/i8n de Next.js, como esta .

Seguridad

A través del NextRequestobjeto, la información de las cookies está disponible (en la cookiesclave) y al usarlo NextResponsepuede configurar cookies. Estas cookies se pueden utilizar para autenticar a los usuarios en su sitio.

Es posible que también desee bloquear el acceso a sus sitios a ciertos usuarios, como bots o usuarios de un determinado país. Para lograr esto, puede devolver condicionalmente un 404 o reescribir la solicitud en una página "bloqueada". Vercel tiene un ejemplo de bloqueo basado en la ubicación aquí .

Pruebas A/B

Anteriormente, para mostrar una página diferente a un usuario en un sitio estático como parte de una prueba A/B (o un ejercicio similar), habría tenido que procesar la solicitud del usuario en el lado del cliente, lo que puede provocar cambios de diseño acumulativos o un flash. . Sin embargo, si lo procesamos en un servidor esto se puede evitar. Viajes y turismo

Para lograr esto, puede colocar a los usuarios en "depósitos" a través de cookies y luego redirigirlos según el depósito en el que los coloca su cookie. Vea el ejemplo de Vercel para ver cómo puede funcionar.

Las limitaciones del middleware

El middleware está empezando a parecer maravilloso, ¿no? Si bien es maravilloso, existen algunos inconvenientes, lo que significa que probablemente seguirás necesitando rutas API para ciertos casos de uso.

Algunas de estas limitaciones son específicas de las implementaciones de Vercel de sitios Next.js; sin embargo, existen limitaciones similares en otras plataformas.

Tiempo de ejecución (específico de Vercel)

Una función de middleware puede ejecutarse durante un máximo de treinta segundos; sin embargo, como mencioné anteriormente, debe devolver una respuesta en un segundo y medio. Esto significa que su función debe devolver una respuesta lo antes posible y luego puede continuar con cualquier otra carga de trabajo en segundo plano si es necesario. Por ejemplo, si desea realizar análisis del lado del servidor, puede extraer la información que necesita, devolver una respuesta y luego realizar una llamada a su base de datos para registrar la información después de devolver la respuesta.

Tamaño de función (específico de Vercel)

Una función de middleware puede tener como máximo 1 MB, esto incluye todo el resto del código incluido con la función. La mayoría de los casos de uso no requerirán un paquete de código tan grande, pero ciertamente es algo a lo que hay que prestar atención.

Las API nativas de Node.js no son compatibles

Las funciones de middleware no se ejecutan a través de Node.js como lo hace el resto del código del lado del servidor de Next.js (como las rutas API). Una de las cosas clave que limitan el desempeño de las funciones de Middleware es la lectura y escritura en el sistema de archivos.

Esto también significa que los módulos JavaScript que dependen de las API nativas de Node.js tampoco se pueden utilizar.

Sólo módulos ES

Los módulos de nodo se pueden utilizar dentro del middleware; sin embargo, deben ser módulos ES. Si bien hay un cambio creciente dentro del ecosistema para cambiar a módulos ES, todavía hay muchos paquetes que usan CommonJS o dependen de otros paquetes a través de CommonJS.

Sin evaluación de cadena

Ni JavaScript evalni new Function(evalString)están permitidos dentro del tiempo de ejecución.

Implementación de software intermedio

Para explorar cómo funciona el middleware, crearemos un acortador de enlaces que será mucho más rápido que los que utilizan rutas API.

Para comenzar, clona el iniciador de la aplicación:

yarn create next-app -e https://github.com/sampoder/middleware-demo/tree/starter

El iniciador tiene dos archivos clave: routes.js pages/index.js. routes.jscontendrá todas las rutas para nuestro acortador de enlaces. Normalmente, usaría una base de datos, pero para este ejercicio, lo mantendremos simple con un objeto clave/valor codificado. pages/index.jsServirá como página de inicio de nuestro acortador de enlaces con una lista de todas las rutas disponibles.

Luego crearemos nuestra función Middleware creando un nuevo archivo nombrado _middleware.jsen el pagesdirectorio. Una función de middleware tiene como ámbito el directorio y afecta las rutas de hermanos e hijos. Por ejemplo, como el /pagesdirectorio está vinculado a las /rutas, si el middleware se coloca en el /pagesdirectorio, se aplicará a las rutas, como /abouto /about/team/john. Mientras tanto, si el middleware se colocara en el /pages/blogdirectorio, se aplicaría a rutas como /blog/middlewareo /blog/about/submit, pero no a /info.

Luego necesitaremos importar NextResponsedesde next/server:

import { NextResponse } from 'next/server'

Como el NextResponseobjeto es una extensión de la interfaz de Node.js Response, nos permitirá modificar la respuesta.

También necesitaremos importar el archivo de rutas:

import routes from "../routes"

Cada archivo de middleware necesita exportar una función denominada middleware. Esto será lo que Next.js ejecutará a pedido:

export function middleware(req) { }

La función de middleware pasará a través de un objeto de solicitud. Similar al NextResponseobjeto, este objeto de solicitud es una extensión de la Requestinterfaz de Node.js. Nos dará información sobre la solicitud del cliente.

A través de este objeto de solicitud podemos acceder al nombre de la ruta de la solicitud actual mediante la nextUrlclave:

let { pathname } = req.nextUrl;

Para nuestro acortador de enlaces necesitaremos verificar si nuestro routesobjeto contiene una clave con el mismo valor que el nombre de la ruta:

if (routes[pathname]) {}

Luego podemos usar el NextResponseobjeto para modificar la respuesta. El NextResponseobjeto nos permite dar redirect()respuestas rewrite()a diferentes ubicaciones. Mientras creamos un acortador de URL, usaremos el redirect()método para transportar a los usuarios a su destino previsto:

if (routes[pathname]) { return NextResponse.redirect(routes[req.nextUrl.pathname])}

Creamos un nuevo NextResponseobjeto, aplicamos el método de redirección y luego devolvimos ese objeto.

También debemos manejar los casos en los que el nombre de la ruta no tiene un destino coincidente. En estos casos, redirigiremos a los usuarios a nuestra página de inicio:

else{ const url = request.nextUrl.clone() url.pathname = '/' return NextResponse.redirect(url)}

No podemos redireccionar /directamente porque la compatibilidad con URL relativas dentro del middleware pronto dejará de estar disponible . En su lugar, hacemos una clonación de la URL de la solicitud y cambiamos el nombre de la ruta, antes de pasar ese objeto URL a la redirect()función.

¡Y así de simple tenemos un acortador de enlaces que funciona! Para aquellos curiosos, toda nuestra función de middleware terminó como:

import { NextResponse } from "next/server";import routes from "../routes";export function middleware(req) { let { pathname } = req.nextUrl if (routes[pathname]) { return NextResponse.redirect(routes[req.nextUrl.pathname]) } else{ const url = request.nextUrl.clone() url.pathname = '/' return NextResponse.redirect(url) }}

Y el código base completo está disponible en https://github.com/sampoder/middleware-demo .

Si bien este ejemplo es breve, muestra lo útil que puede ser el middleware a la hora de crear cosas. Cuando ejecute la aplicación web, también verá qué tan rápida puede ser.

Por último, pero no menos importante, el middleware es muy prometedor y espero que hayas disfrutado explorando esta función conmigo.

(vf, yk, il)Explora más en

API
Guías
Siguiente.js
javascript

Tal vez te puede interesar:

Qué, cuándo, por qué y cómo de la nueva función de middleware de Next.js

Qué, cuándo, por qué y cómo de la nueva función de middleware de Next.js

¿Qué pasa con las rutas API?¿Cuándo debo utilizar middleware?Las limitaciones del middlewareImplementación de software intermedioPatrones de diseño de in

programar

es

https://aprendeprogramando.es/static/images/programar-que-1134-0.jpg

2025-01-08

Qué, cuándo, por qué y cómo de la nueva función de middleware de Next.js — Qué, cuándo, por qué y cómo de la nueva función de middleware de Next.js

Si crees que alguno de los contenidos (texto, imagenes o multimedia) en esta página infringe tus derechos relativos a propiedad intelectual, marcas registradas o cualquier otro de tus derechos, por favor ponte en contacto con nosotros en el mail [email protected] y retiraremos este contenido inmediatamente

Update cookies preferences