¿Qué es Edge Rendering?

Edge Rendering ejecuta lógica de servidor en una red distribuida globalmente de pequeños runtimes situados cerca del usuario final. En lugar de renderizar el HTML en una única región de origin, la petición se atiende en el punto de presencia más cercano. Para los storefronts de commerce, esto reduce drásticamente el TTFB y habilita una personalización rápida sin renunciar al SSR.

Definición

Los runtimes de edge como Vercel Edge, Cloudflare Workers, Netlify Edge Functions y Deno Deploy ejecutan aislados de V8 con límites estrictos de CPU y memoria, pero con una latencia de arranque en frío muy baja. Soportan estándares web como Fetch, Streams y Request/Response, lo que permite que frameworks como Next.js, Remix, SvelteKit y Astro apunten al edge con el mismo código de componentes que en sus runtimes de Node. Edge Rendering suele combinarse con una content-delivery-network-cdn para la entrega de assets y con una cache-layer como el almacenamiento KV, R2 o Vercel Data Cache para respuestas de API memoizadas.

Por qué es importante

La latencia domina el rendimiento percibido, y las idas y vueltas a un único origin pueden añadir fácilmente cientos de milisegundos para los usuarios alejados de esa región. Al ejecutar la lógica de render en el mismo PoP que ya sirve los assets estáticos, Edge Rendering sitúa el TTFB en el rango de 50 a 150 ms a escala global. Ese presupuesto queda entonces disponible para el LCP, la hidratación y las llamadas a APIs posteriores. También habilita A/B Testing, geo-routing, feature flags y personalización a nivel de documento sin una petición adicional en el cliente que perjudicaría al INP y al CLS.

Casos de uso

Los equipos de composable commerce usan Edge Rendering para shells de storefront, redirecciones según geolocalización, selección de moneda e idioma y fragmentos de carrito autenticados. Una configuración típica sirve HTML cacheado con ISR en el edge y luego inyecta fragmentos personalizados mediante streaming-ssr o middleware en el edge. Edge Rendering encaja de forma natural con islands-architecture, donde solo determinados componentes necesitan lógica de servidor. También combina bien con React Server Components en Next.js: los server components se ejecutan en el edge, obtienen datos de capas de caché colocalizadas y hacen streaming del HTML al cliente. Para storefronts globales que sustituyen una monolithic-architecture, Edge Rendering es uno de los movimientos con mayor apalancamiento.

Relacionado

Explora Performance and Core Web Vitals · Composable Headless Frontend.