M

MLOG

Español

Explora Next.js Edge Config: una potente solución para distribuir configuraciones globalmente con rapidez y eficiencia. Aprende a optimizar tu aplicación con configuración dinámica en el borde.

Next.js Edge Config: Distribución Global de Configuración Simplificada

En el vertiginoso panorama actual del desarrollo web, es crucial ofrecer experiencias personalizadas y dinámicas a los usuarios de todo el mundo. Next.js, un popular framework de React, ofrece una solución sólida para construir aplicaciones web escalables y de alto rendimiento. Una de sus características clave es Edge Config, una potente herramienta para gestionar y distribuir configuraciones globalmente en el borde. Esta publicación de blog proporciona una guía completa para comprender y utilizar Next.js Edge Config para optimizar el rendimiento de tu aplicación y ofrecer experiencias personalizadas a tu audiencia global.

¿Qué es Next.js Edge Config?

Next.js Edge Config es un almacén de clave-valor de baja latencia y distribuido globalmente, diseñado específicamente para servir datos de configuración a las Edge Functions de Next.js. A diferencia de las bases de datos o API tradicionales, Edge Config está optimizado para la velocidad y la eficiencia, permitiéndote acceder a los datos de configuración en milisegundos desde cualquier parte del mundo. Esto te permite ajustar dinámicamente el comportamiento de tu aplicación basándote en los valores de configuración, sin sacrificar el rendimiento.

Piénsalo como un archivo JSON replicado globalmente que puedes consultar increíblemente rápido desde las Edge Functions. Esto lo hace ideal para:

¿Por qué usar Edge Config?

Estos son los beneficios clave de usar Next.js Edge Config:

Cómo Empezar con Edge Config

Aquí tienes una guía paso a paso para empezar con Next.js Edge Config:

1. Configuración del Proyecto

Asegúrate de tener un proyecto de Next.js. Si no es así, crea uno usando:

npx create-next-app@latest my-app
cd my-app

2. Crear un Edge Config

Necesitarás una cuenta de Vercel para usar Edge Config. Una vez que hayas iniciado sesión, navega a tu proyecto de Vercel y crea un nuevo Edge Config. Dale un nombre descriptivo.

3. Instalar el SDK de Edge Config

Instala el SDK @vercel/edge-config en tu proyecto de Next.js:

npm install @vercel/edge-config
# o
yarn add @vercel/edge-config
# o
pnpm install @vercel/edge-config

4. Configurar Variables de Entorno

Necesitarás configurar la variable de entorno EDGE_CONFIG. Puedes encontrar el valor de esta variable en el panel de control de Vercel para tu Edge Config. Añádelo a tu archivo .env.local (o a la configuración de tu proyecto en Vercel para producción):

EDGE_CONFIG=your_edge_config_url

Importante: Nunca subas tu archivo .env.local a tu repositorio. Utiliza la configuración de variables de entorno de Vercel para los entornos de producción.

5. Acceder a los Valores de Configuración en tu Código

Ahora puedes acceder a los valores de tu Edge Config en tu código de Next.js. Aquí tienes un ejemplo:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const featureFlag = await get('featureFlag');
  const welcomeMessage = await get('welcomeMessage');

  return {
    props: {
      featureFlag,
      welcomeMessage,
    },
  };
}

export default function Home({ featureFlag, welcomeMessage }) {
  return (
    <div>
      <h1>{welcomeMessage}</h1>
      {featureFlag ? <p>¡La funcionalidad está activada!</p> : <p>La funcionalidad está desactivada.</p>}
    </div>
  );
}

En este ejemplo, estamos obteniendo los valores de featureFlag y welcomeMessage del Edge Config en getServerSideProps. Estos valores se pasan luego como props al componente Home.

6. Actualizar los Valores de Configuración

Puedes actualizar los valores en tu Edge Config a través del panel de control de Vercel. Los cambios se propagan globalmente en milisegundos.

Casos de Uso Avanzados y Ejemplos

Pruebas A/B con Edge Config

Edge Config es perfecto para las pruebas A/B. Puedes definir un valor de configuración que determine qué versión de tu aplicación servir a un usuario. Por ejemplo:

  1. Crea un Edge Config con una clave llamada abTestGroup.
  2. Establece el valor como A o B.
  3. En tu Edge Function, lee el valor de abTestGroup.
  4. Basándote en el valor, sirve la versión A o la versión B de tu contenido.

Aquí tienes un ejemplo:

// pages/index.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps() {
  const abTestGroup = await get('abTestGroup');

  let content;
  if (abTestGroup === 'A') {
    content = '¡Esta es la versión A!';
  } else {
    content = '¡Esta es la versión B!';
  }

  return {
    props: {
      content,
    },
  };
}

export default function Home({ content }) {
  return (
    <div>
      <h1>Prueba A/B</h1>
      <p>{content}</p>
    </div>
  );
}

Puedes usar herramientas de análisis para rastrear el rendimiento de cada versión y determinar cuál funciona mejor. Considera herramientas como Google Analytics, Amplitude o Mixpanel para una recopilación y análisis exhaustivo de datos de pruebas A/B.

Feature Flags (Indicadores de Funcionalidad) con Edge Config

Los feature flags te permiten activar o desactivar funcionalidades sin desplegar nuevo código. Esto es útil para probar nuevas funcionalidades en producción o para lanzarlas gradualmente a un subconjunto de usuarios. De forma similar a las pruebas A/B, puedes controlar la disponibilidad de una funcionalidad con un simple indicador booleano en tu Edge Config.

  1. Crea un Edge Config con una clave llamada newFeatureEnabled.
  2. Establece el valor como true o false.
  3. En tu Edge Function, lee el valor de newFeatureEnabled.
  4. Basándote en el valor, activa o desactiva la nueva funcionalidad.
// components/MyComponent.js
import { get } from '@vercel/edge-config';

export async function MyComponent() {
  const newFeatureEnabled = await get('newFeatureEnabled');

  return (
    <div>
      {newFeatureEnabled ? <p>¡La nueva funcionalidad está activada!</p> : <p>La nueva funcionalidad está desactivada.</p>}
    </div>
  );
}

export default MyComponent;

Personalización con Edge Config

Puedes usar Edge Config para personalizar el contenido y las experiencias según las preferencias o la ubicación del usuario. Por ejemplo, puedes almacenar las preferencias del usuario en una base de datos y luego usar Edge Config para servir contenido diferente según esas preferencias.

Escenario de Ejemplo: Un sitio de comercio electrónico global quiere mostrar recomendaciones de productos basadas en el país del usuario. Podrían usar un Edge Config para mapear países a categorías de recomendación.

  1. Crea un Edge Config con una clave llamada countryToCategoryMap.
  2. Establece el valor como un objeto JSON que mapea países a categorías de productos (ej., {"US": "Electronics", "GB": "Fashion", "JP": "Home Goods"}).
  3. En tu Edge Function, lee el valor de countryToCategoryMap.
  4. Determina el país del usuario (ej., a partir de su dirección IP o una cookie).
  5. Usa el countryToCategoryMap para determinar la categoría de producto apropiada.
  6. Muestra recomendaciones de productos de esa categoría.
// pages/products.js
import { get } from '@vercel/edge-config';

export async function getServerSideProps(context) {
  const countryToCategoryMap = await get('countryToCategoryMap');
  const country = context.req.headers['x-vercel-ip-country'] || 'US'; // Por defecto, US
  const category = countryToCategoryMap[country] || 'General'; // Por defecto, General

  // Obtener recomendaciones de productos basadas en la categoría
  const products = await fetchProducts(category);

  return {
    props: {
      products,
    },
  };
}

export default function Products({ products }) {
  return (
    <div>
      <h1>Recomendaciones de Productos</h1>
      <ul>
        {products.map((product) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

async function fetchProducts(category) {
  // Reemplaza con tu lógica real de obtención de productos
  return [
    { id: 1, name: `Producto 1 (${category})` },
    { id: 2, name: `Producto 2 (${category})` },
  ];
}

Este ejemplo utiliza el encabezado x-vercel-ip-country para determinar el país del usuario. Este encabezado es añadido automáticamente por Vercel. Es importante tener en cuenta que depender únicamente de la geolocalización basada en IP puede no ser siempre preciso. Considera usar otros métodos como la ubicación proporcionada por el usuario o servicios de geolocalización más sofisticados para mejorar la precisión.

Enrutamiento Geográfico con Edge Config

Puedes dirigir a los usuarios a diferentes recursos según su ubicación usando Edge Config. Esto es útil para servir contenido localizado o para cumplir con regulaciones regionales.

  1. Crea un Edge Config con una clave llamada countryToRedirectMap.
  2. Establece el valor como un objeto JSON que mapea países a URL (ej., {"CN": "/china", "DE": "/germany"}).
  3. En tu Edge Function, lee el valor de countryToRedirectMap.
  4. Determina el país del usuario (ej., a partir de su dirección IP).
  5. Redirige al usuario a la URL apropiada.
// pages/_middleware.js
import { NextResponse } from 'next/server'
import { get } from '@vercel/edge-config';

export async function middleware(req) {
  const countryToRedirectMap = await get('countryToRedirectMap');
  const country = req.geo.country || 'US'; // Por defecto, US
  const redirectUrl = countryToRedirectMap[country];

  if (redirectUrl) {
    return NextResponse.redirect(new URL(redirectUrl, req.url))
  }

  return NextResponse.next()
}

export const config = {
  matcher: '/',
}

Este ejemplo usa la propiedad req.geo.country, que es poblada automáticamente por la Red de Borde de Vercel con el código de país del usuario. Este es un enfoque más limpio y fiable que analizar directamente el encabezado x-vercel-ip-country. La función de middleware comprueba si hay una URL de redirección definida para el país del usuario en el Edge Config. Si es así, redirige al usuario a esa URL. De lo contrario, continúa procesando la solicitud.

Limitación de Tasa (Rate Limiting) con Edge Config

Aunque Edge Config no está diseñado para ser una solución completa de limitación de tasa, puedes usarlo junto con otras técnicas para implementar una limitación de tasa básica. La idea es almacenar parámetros de limitación de tasa (ej., solicitudes por minuto) en Edge Config y luego usar esos parámetros en tus Edge Functions para aplicar los límites.

Nota Importante: Este enfoque es adecuado para escenarios de limitación de tasa simples. Para una limitación más robusta, considera usar servicios o middleware dedicados a la limitación de tasa.

  1. Crea un Edge Config con claves como requestsPerMinute y blockedIps.
  2. Establece el valor de requestsPerMinute al límite de tasa deseado.
  3. Establece el valor de blockedIps como un array de direcciones IP que deberían ser bloqueadas.
  4. En tu Edge Function, lee los valores de requestsPerMinute y blockedIps.
  5. Comprueba si la dirección IP del usuario está en el array blockedIps. Si es así, bloquea la solicitud.
  6. Usa un mecanismo de caché (ej., Redis o Vercel's Edge Cache) para rastrear el número de solicitudes de cada dirección IP en el último minuto.
  7. Si el número de solicitudes de la dirección IP del usuario excede el límite de requestsPerMinute, bloquea la solicitud.

Ejemplo (Ilustrativo - Requiere Implementación Adicional para el Caché):

// pages/api/protected-route.js
import { get } from '@vercel/edge-config';

export default async function handler(req, res) {
  const requestsPerMinute = await get('requestsPerMinute');
  const blockedIps = await get('blockedIps');
  const ip = req.headers['x-real-ip'] || req.connection.remoteAddress; // Obtener la IP del usuario

  // Comprobar si la IP está bloqueada
  if (blockedIps && blockedIps.includes(ip)) {
    return res.status(429).send('Demasiadas Solicitudes');
  }

  // TODO: Implementar el conteo de solicitudes y el caché (ej., usando Redis o Vercel Edge Cache)
  // Ejemplo (Conceptual):
  // const requestCount = await getRequestCount(ip);
  // if (requestCount > requestsPerMinute) {
  //   return res.status(429).send('Demasiadas Solicitudes');
  // }
  // await incrementRequestCount(ip);

  // Lógica de tu ruta protegida aquí
  res.status(200).send('¡Acceso exitoso a la ruta protegida!');
}

Consideraciones Importantes para la Limitación de Tasa:

Mejores Prácticas para Usar Edge Config

Alternativas a Edge Config

Aunque Edge Config es una herramienta potente, no siempre es la mejor solución para todos los casos de uso. Aquí hay algunas alternativas a considerar:

Conclusión

Next.js Edge Config es una potente herramienta para gestionar y distribuir configuraciones globalmente en el borde. Al aprovechar Edge Config, puedes optimizar el rendimiento de tu aplicación, ofrecer experiencias personalizadas y simplificar tu flujo de trabajo de gestión de configuración. Ya sea que estés construyendo un sitio de comercio electrónico global, una plataforma de redes sociales o cualquier otro tipo de aplicación web, Edge Config puede ayudarte a ofrecer una experiencia rápida y atractiva a tus usuarios en todo el mundo. ¡Explora las posibilidades e integra Edge Config en tus proyectos de Next.js hoy mismo para desbloquear todo su potencial!