La función Edge puede ser un concepto pequeño y bien definido, pero puede usarlo para una amplia gama de propósitos.
Next.js es un marco popular de código abierto para desarrollar aplicaciones React renderizadas del lado del servidor. Gracias a su facilidad de uso y adaptabilidad, puedes usarlo para crear aplicaciones web complejas.
Las funciones de borde son una de las características más interesantes de Next.js. Obtenga información sobre las funciones de Edge y cinco formas de usarlas en Next.js.
¿Qué son las funciones de borde?
La potente característica de funciones perimetrales de Next.js le permite ejecutar funciones personalizadas sin servidor más cerca del usuario final en la red perimetral. Esto implica que el código se ejecuta en servidores que se encuentran geográficamente más cerca del cliente, lo que genera mayor rapidez y rendimiento en las aplicaciones web.
Las funciones de Edge pueden cambiar la solicitud o la respuesta, obtener datos, autenticarse y más.
Las funciones de Edge se ejecutan al instante. Dado que reducen el tiempo que lleva cargar datos y renderizar páginas, puede usar las funciones de Edge para mejorar el rendimiento web y la experiencia del usuario.
Los gadgets modernos y de próxima generación necesitan computación de borde porque es más confiable y seguro que computación en la nube y aprovecha las funciones de Edge. Además, es más capaz y flexible que la computación sola en el dispositivo.
Aquí hay algunas formas en que puede usar las funciones de Edge en Next.js.
1. Enrutamiento dinámico
Una forma de usar las funciones de Edge en Next.js es a través del enrutamiento dinámico. Puede definir y administrar rutas personalizadas basadas en datos dinámicos, como parámetros de consulta o encabezados de solicitud.
Esto es valioso para hacer aplicaciones web más adaptables y dinámicas que se ocupan de diversas solicitudes.
Puede usar las funciones Edge de Next.js para implementar el enrutamiento dinámico de la siguiente manera:
// páginas/api/[slug].js
exportarpor defectofunciónmanipulador(requerimiento, res) {
constante { slug } = req.consulta;
si (babosa 'acerca de') {
res.status(200).enviar('¡Esta es la página acerca de!');
} demássi (babosa 'contacto') {
res.status(200).enviar('¡Esta es la página de contacto!');
} demás {
res.status(404).enviar('Página no encontrada.');
}
}
Este ejemplo muestra el contenido de un archivo llamado [babosa.js] en el páginas/api directorio para definir una ruta personalizada con datos dinámicos. Luego, el límite de slug se elimina de la consulta de solicitud usando req.consulta, que le permite hacer frente a demandas fuertemente fundadas en el valor de la babosa.
Por ejemplo, si un usuario va a http://example.com/api/about, el parámetro slug se establecerá en acerca de. El manipulador La función ejecutará el bloque de código apropiado y mostrará el mensaje "¡Esta es la página acerca de!"
Si el cliente visita http://example.com/api/contact, manipulador devolverá el mensaje "¡Esta es la página de contacto!"
Al usar las funciones de Edge para el enrutamiento dinámico, los desarrolladores pueden crear aplicaciones web más adaptables y dinámicas que pueden manejar varias solicitudes basadas en datos cambiantes.
2. Obtención de datos
En Next.js, un caso de uso común para las funciones de Edge es la obtención de datos. Puede reducir la carga en el servidor y aumentar el rendimiento de la aplicación web llevando los datos al límite.
Las funciones de Edge de Next.js pueden realizar la obtención de datos, como se muestra en este ejemplo:
// páginas/api/usuarios/[id].jsexportarpor defectoasíncronofunciónmanipulador(requerimiento, res) {
constante { id } = req.consulta;// Obtener datos de usuario de una API de terceros
constante respuesta = esperar buscar(` https://api.example.com/users/${id}`);
constante usuario = esperar respuesta.json();
// Devuelve los datos del usuario
res.status(200).json (usuario);
}
Este ejemplo define un punto final de API que utiliza el identificación parámetro de consulta para recuperar datos de usuario de una API de terceros. Utilizando el buscar método, puede enviar una solicitud a la API y luego esperar una respuesta con la palabra clave await.
Luego, el código extrae la información JSON llamando respuesta.json() y lo almacena en una variable. Finalmente, utiliza el json método de la respuesta para dar formato a los datos de respuesta como JSON.
La obtención de datos de función perimetral es una técnica poderosa que le permite obtener datos en el perímetro, lo que reduce la carga del servidor y mejora el rendimiento de la aplicación web.
También puede reducir la inactividad de la demanda y brindar a los clientes páginas más rápidas y con mayor capacidad de respuesta al obtener información de una interfaz de programación externa en el borde.
3. Utilizado en la autenticación
Al implementar reglas de control de acceso en el borde, puede mejorar la seguridad de su aplicación web y reducir el riesgo de acceso no autorizado a datos confidenciales.
Como ejemplo, considere una función que verifica el estado de autenticación de un cliente y lo repite en la respuesta. Aquí hay un resumen de la verificación que involucra las capacidades de Edge en Next.js:
// páginas/api/auth.js
exportarpor defecto (requerido, res) => {
constante { isAuthenticated } = req.cookies;
si (está autenticado) {
res.status(200).json({ mensaje: 'Estás autenticado' });
} demás {
res.status(401).json({ mensaje: 'No estás autenticado' });
}
}
En esta ilustración, la función Edge examina la cookie en busca de un token de autenticación y, si lo encuentra, genera una respuesta JSON con la información del usuario.
4. La prueba A/B
Otra forma de utilizar las funciones Edge de Next.js es optimizar el rendimiento de una aplicación web mediante pruebas A/B. Puede comparar varias versiones de un sitio web o una aplicación mediante pruebas A/B para determinar cuál funciona mejor.
Una ilustración de cómo se pueden usar las funciones de Edge de Next.js para realizar pruebas A/B es la siguiente:
// páginas/api/abtest.js
constante variantes = ['varianteA', 'variante B'];exportarpor defectofunciónmanipulador(requerimiento, res) {
constante { ID de usuario } = req.consulta;// Generar una variante aleatoria para el usuario
constante índiceVariante = Matemáticas.piso(Matemáticas.random() * variantes.longitud);
constante variante = variantes[índicevariante];// Almacenar la variante en una cookie
res.setHeader('Configurar-cookie', `variante=${variante}; Max-Edad=604800;`);
// Renderizar la variante correspondiente
si (variante 'varianteA') {
res.status(200).enviar('¡Bienvenido a la variante A!');
} demás {
res.status(200).enviar('¡Bienvenido a la variante B!');
}
}
Este código demuestra un punto final de la interfaz API que ejecuta una prueba A/B para dos variaciones únicas de una página del sitio. utiliza el Matemáticas.aleatoria() método para crear una variante aleatoria para el usuario y lo almacena en una cookie con el res.setHeader método. Esto permite que el código asegure que el cliente vea la misma variación en futuras visitas.
A continuación, el código utiliza el variante el valor de la cookie para representar la variante apropiada. Muestra un mensaje que indica qué variante seleccionó.
Con las funciones de Edge, los desarrolladores pueden usar una poderosa herramienta llamada prueba A/B para comparar diferentes versiones de una aplicación o página web para ver cuál funciona mejor. Puede recopilar datos sobre el comportamiento del usuario y mejorar el rendimiento de la aplicación web y la experiencia del usuario mediante la asignación aleatoria de usuarios a varias variantes.
5. Respuestas en caché
El almacenamiento de reacciones es otra forma en que puede usar las capacidades de Edge en Next.js para optimizar la ejecución web. Nos permite mantener las reacciones por un tiempo determinado para reducir la cantidad de solicitudes realizadas al servidor y trabajar en la velocidad de la aplicación web.
Aquí hay una ilustración de cómo puede llevar a cabo el almacenamiento de reacciones con Edge Capabilities en Next.js:
// páginas/api/datos.js
constante datos = { nombre: 'Juan Doe', edad: 30 };exportarpor defectofunciónmanipulador(requerimiento, res) {
// Establecer encabezados de respuesta para habilitar el almacenamiento en caché
res.setHeader('Control de caché', 's-maxage=10, obsoleto mientras se revalida');
// Devolver datos
res.status(200).json (datos);
}
Este ejemplo define un punto final de API que devuelve una respuesta JSON con algunos datos.
Establecemos los encabezados de reacción usando el res.setHeader técnica para habilitar la reserva durante 10 segundos usando el s-max-edad Perímetro. Esto indica que la CDN puede almacenar en caché la respuesta hasta diez segundos antes de requerir una actualización.
También usamos el obsoleto mientras se revalida parámetro para permitir que la CDN entregue una respuesta almacenada en caché que ha caducado mientras se realiza una nueva respuesta en segundo plano. Incluso si la respuesta almacenada en caché ha caducado, la CDN generará una nueva y siempre enviará una respuesta.
El almacenamiento en caché de respuestas de las funciones perimetrales es una forma excelente de acelerar la aplicación web y reducir la cantidad de solicitudes al servidor. Puede garantizar a los usuarios sitios web más rápidos y receptivos almacenando en caché las respuestas durante un tiempo predeterminado.
Las funciones de borde son una característica increíblemente poderosa de Next.js
La compatibilidad de Next.js con funciones perimetrales es una característica convincente que le permite ejecutar funciones personalizadas sin servidor más cerca del usuario final en la red perimetral.
Hay varias formas de usar las funciones de Edge para mejorar las aplicaciones web: pruebas A/B, almacenamiento en caché de respuestas, enrutamiento dinámico, obtención de datos, autenticación.
El uso de las capacidades de Edge en su arquitectura puede mejorar la experiencia de sus clientes y dar como resultado aplicaciones web más rápidas y con mayor capacidad de respuesta.