Cloudflare lanzó la versión 1.0 de Vinext, un marco de código abierto que permite ejecutar aplicaciones de Next.js sobre Vite, con la posibilidad de desplegarlas en plataformas como Cloudflare Workers, Netlify y AWS Lambda. El proyecto está dirigido tanto a aplicaciones nuevas como a proyectos existentes, incluidos aquellos que utilizan Pages Router o App Router, en lugar de limitar la compatibilidad a la arquitectura más reciente de Next.js.
Compatibilidad más amplia con aplicaciones de Next.js
Vinext pasó de ser un experimento impulsado por inteligencia artificial que duró una semana cuando se lanzó en febrero a convertirse en un marco que, según Cloudflare, se utiliza en producción con aplicaciones de alto tráfico y dinámicas. La empresa afirma que su compatibilidad con la mayoría de las funciones solicitadas por los clientes supera el 99 %, mientras continúa probando el comportamiento real de las aplicaciones y no solo simulando API con los mismos nombres.
La versión es compatible con las rutas App Router y Pages Router, además de las aplicaciones híbridas, los componentes de React en el servidor, las acciones del servidor, las rutas de API, los controladores de rutas, el middleware y la navegación del lado del cliente. También cubre la representación de páginas en el servidor, la regeneración incremental de páginas (ISR), la exportación a recursos estáticos y la revalidación en segundo plano o bajo demanda.
¿Qué cambia en la práctica?
Vinext unifica las funciones de almacenamiento en caché entre las dos rutas y los entornos de ejecución compatibles, con compatibilidad adicional para Workers Cache. También ofrece trazas compatibles con Next.js, lo que permite mantener las configuraciones actuales de OpenTelemetry y Sentry, y se integra en Cloudflare Workers con las herramientas de observabilidad nativas de Workers.
La versión añade compatibilidad directa con el entorno workerd durante el desarrollo y la producción, con acceso a servicios de Cloudflare como la optimización de imágenes y Hyperdrive. En cambio, la compatibilidad con el enrutamiento de use cache asociado a Cache Components sigue siendo limitada; Cloudflare explica que la prioridad actual son las funciones fundamentales del marco de las que dependen las aplicaciones en producción.
Calentamiento de la caché antes del lanzamiento
Vinext 1.0 ofrece un mecanismo para representar previamente las páginas de las rutas App Router y Pages Router durante el proceso de compilación y luego servirlas mediante ISR e invalidarlas según la ruta o la etiqueta. Sin embargo, añade una opción diferente para aplicaciones que contienen decenas o cientos de miles de URL: trasladar parte de la representación previa desde el equipo de compilación a la red de Cloudflare.
La función de cache warming utiliza los indicadores habituales de Next.js para determinar las páginas que deben prepararse y también puede identificar las páginas con mayor tráfico. Antes de convertir la nueva versión en la versión que recibe el tráfico de producción, Cloudflare despliega una versión de Worker con el cero por ciento del tráfico y luego solicita las páginas desde esa versión para llenar la caché. Una vez completado el proceso, el despliegue puede promocionarse. Esto reduce la espera de la compilación secuencial de las páginas con pocas visitas, pero en la práctica está vinculado al despliegue en Cloudflare cuando se utiliza esta función.
Pruebas y ruta de migración
Cloudflare afirma que el proyecto se basa en miles de pruebas que cubren el comportamiento del marco, los servidores en los modos de desarrollo y producción, y los objetivos de despliegue en Node.js y Cloudflare Workers. También ejecuta cada noche el conjunto completo de pruebas de Next.js en Vinext para detectar regresiones derivadas de cambios en el proyecto upstream. El proceso de migración incluye dos comandos para comprobar la compatibilidad del proyecto y configurar Vite y el despliegue, manteniendo la estructura anterior del proyecto de Next.js: npx vinext check y luego npx vinext init.
Vinext está disponible para proyectos nuevos y existentes, y puede desplegarse en Cloudflare Workers con calentamiento de la caché mediante el comando npx @vinext/cloudflare deploy --warm-cache. La matriz de compatibilidad y la compatibilidad incompleta con funciones como Cache Components siguen siendo aspectos que los equipos deben revisar antes de adoptar la migración en aplicaciones complejas.