▲ Sesión comunitaria: Nuxt en Vercel

VVercel
컴퓨터/소프트웨어자격증/평생교육AI/미래기술

Transcript

00:00:00Y si quiero un portafolio, por ejemplo, tal vez no sea muy importante decir que uso esto, pero
00:00:13sí, tienes directamente lo que quieres y luego puedes editar rápidamente tu proyecto.
00:00:29Así que sí, eso es todo sobre los agentes por ahora, no sé si tenemos más ideas.
00:00:38Puedes mencionar las publicaciones del blog donde detallamos todo para explicar cómo fue
00:00:45implementado, además de que el código fuente es abierto.
00:00:49Si quieres profundizar en cómo creamos el siguiente agente en el sitio web, qué componentes
00:00:55usamos para mostrar el razonamiento en el lateral, todo lo que hay tras bambalinas y
00:01:02si quieres contribuir para añadirle más funciones, creo que este es el lugar para empezar
00:01:08a aprender de ello.
00:01:11Y esto tampoco es lo único, ¿verdad?
00:01:13Porque Hugo construyó el kit de herramientas MCP, que permite que cualquier sitio Nuxt sea también un
00:01:22servidor MCP e integrarse en cualquier IA que lo soporte.
00:01:30Y Nuxt.com se ha convertido realmente en el centro de muchas cosas.
00:01:35Nunca creerías que tiene esta API.
00:01:39Es nuestra API de módulos la que potencia las Nuxt dev tools.
00:01:42Tiene servidores MCP, muchísimos, a los que puedes conectarte desde tu app Nuxt, desde
00:01:48tu agente de IA, y ahora se ha integrado con chat.
00:01:53O sea, alguien tiene que detener a Hugo.
00:01:55Es simplemente demasiado bueno.
00:01:59Gracias.
00:02:03Algo que hizo, intentaré compartir toda mi pantalla, que me parece bastante
00:02:10impresionante.
00:02:11No sé si ya están viendo mi pantalla.
00:02:15Sí.
00:02:16Es este panel de administración; lo siento, no podrán conectarse a él, pero
00:02:22tenemos este widget en el sitio web donde pueden dejar sus comentarios.
00:02:27Y eso es muy útil para saber en qué páginas debemos enfocarnos
00:02:32con el tiempo, ¿está mejorando?
00:02:37Y hace poco lanzó el admin MCP donde nos conectamos a nuestra conversación y, si no
00:02:47me equivoco aquí.
00:02:50Podría pedirle: ve al admin MCP de Nuxt y dime cuál es la página con más errores y comentarios
00:03:04o cómo mejorarla.
00:03:09Y de esta manera, normalmente, si lo configuré bien, debería llamar, pero ese es el
00:03:16admin, sí.
00:03:23Eso es lo que imaginé.
00:03:24Creo que debo usar el agente llamado admin MCP de Nuxt y pedirle los comentarios sobre la página
00:03:35con peor rendimiento y cómo mejorarla.
00:03:42Quizás este de aquí sea el correcto, debería serlo, sí.
00:03:56Entonces nos dice que esta página tiene una puntuación media.
00:04:00Solo tuvimos tres comentarios, pero así podemos entender algunas pistas sobre cómo
00:04:07mejorar esta página.
00:04:09Probablemente sea porque solo hay comentarios de una semana.
00:04:12Podemos pedir más.
00:04:14Sí, exactamente.
00:04:17Y algo más en lo que hemos estado trabajando; mencionaste Nuxt Content, y Nuxt Content
00:04:21es nuestro CMS base donde tenemos toda nuestra documentación en DOM y podemos usar
00:04:29un componente dentro de Markdown.
00:04:32En los últimos meses, hemos trabajado en un proyecto llamado Comark.
00:04:36Extrajimos el núcleo de los contenidos para poder usarlo, abrirlo y
00:04:44colaborar con el equipo de SvelteKit y el de Nuxt para tener este Markdown con
00:04:50componentes en tiempo de ejecución.
00:04:53Y hablando de IA, este proyecto también soporta streaming y autocierre.
00:05:00Así que tenemos una función en curso ocurriendo aquí, esto hizo que fuera posible
00:05:10decir: genérame una página sobre, digamos, zapatillas de baloncesto.
00:05:20Y podemos... ahora mismo la IA básicamente transmite Markdown puro, pero al aprovechar
00:05:26y enseñar a la IA a usar esta sintaxis, puede empezar a generar páginas de aterrizaje
00:05:33usando estos componentes internamente.
00:05:37Es un progreso en fase muy inicial, pero es bastante prometedor y queremos...
00:05:44estamos trabajando para abrirlo a todos en la V1 en las próximas semanas.
00:05:51Y ese es el progreso actual de Markdown.
00:05:56Y sí, creo que tal vez Daniel tenga algún progreso que quiera compartir.
00:06:01O acabo de ver que se fue.
00:06:03Ah, ha vuelto.
00:06:04Justo a tiempo.
00:06:05Ha vuelto.
00:06:06Hola.
00:06:07Bienvenido.
00:06:08Ya saben, me gusta mantenerlos alerta.
00:06:17Sí, estaba hablando de Comark y Nuxt Content hace un momento, y
00:06:28entonces pensé que Daniel podría tener algo que mencionar.
00:06:30Y luego me di cuenta de lo que buscabas tras la llamada.
00:06:35Bueno, sí.
00:06:37Creo que uno de los temas muy interesantes, no sé cuántas personas
00:06:44están escuchando esto.
00:06:45¿Cómo se revelan secretos sobre cosas en las que pensamos trabajar?
00:06:52Dale a la gente lo que quiere, pero no se lo digas a nadie, ¿vale?
00:06:57Es solo entre nosotros y los amigos cercanos que escuchan ahora; estamos hablando
00:07:12de cómo mejorar nuestro Nuxt.
00:07:14Durante mucho tiempo ha existido esto, y esto se solapa un poco con
00:07:19ese lado especial, pero Nuxt ha sido por muchísimo tiempo una solución
00:07:25para el SEO.
00:07:26La gente ha usado Nuxt para obtener grandes resultados en buscadores de forma
00:07:33inmediata.
00:07:34De hecho, creo que durante un tiempo, Nuxt estaba al principio de los resultados para Next.js,
00:07:42¿verdad, Sebastian? Tú también lo recuerdas, ¿no?
00:07:46La gente buscaba Next y Nuxt aparecía primero, pero eso ya no es
00:07:50cierto.
00:07:51Ya no superamos a Next en el ranking.
00:07:53Pero pensamos en qué podemos hacer con cosas como Nuxt Content para que Nuxt
00:07:59sea la mejor plataforma para la optimización en motores de búsqueda.
00:08:05Qué haces cuando la gente busca información sobre tu producto o lo que sea,
00:08:10que tal vez estén usando otras cosas como un agente, o quizás
00:08:16un altavoz inteligente o algo así.
00:08:19¿Cómo obtienen información sobre tu sitio?
00:08:22Y tenemos muchas cosas planeadas sobre eso.
00:08:24No dirijo yo ese proyecto, para ser claros, pero el equipo sí, y no quiero
00:08:28revelar demasiados secretos, pero vale la pena mencionarlo cuando
00:08:33se trata de pensar en cosas nuevas y geniales que podrían pasar en el lado
00:08:37de Nuxt Content.
00:08:38Sí.
00:08:39Gracias.
00:08:40Si miras los pull requests recientes en el repo de Nuxt.com o en la
00:08:47documentación de Nuxt UI, Benjamin y Hugo han subido más optimizaciones de AEO.
00:08:53Básicamente, si un agente intenta rastrear la documentación de Nuxt, si lo
00:09:00detectamos con el encabezado "accept" esperando texto moderno, servimos las páginas
00:09:06modernas directamente; igual si detectamos el user agent, lo hacemos para todas las páginas,
00:09:13intentamos añadir JSON-LD, más contenido para que los agentes entiendan qué
00:09:19están rastreando, para reducir la ventana de contexto dándoles
00:09:24el contenido directamente.
00:09:26Y hasta ahora estamos experimentando y pensando qué funciones podrían ser parte
00:09:31del núcleo o de nuestro módulo principal, pero para esto, antes de refactorizar y
00:09:36pensar en algo agnóstico, primero debemos experimentarlo nosotros mismos y
00:09:42ver cómo lo adopta la comunidad y si tiene sentido, porque todo evoluciona
00:09:48muy rápido.
00:09:49Hablamos de LLMs.txt, MCP, ahora de aceptar Markdown como encabezado.
00:09:56¿Cómo será esto en dos semanas?
00:09:58Así que no queremos meter funciones directamente al núcleo si luego tenemos
00:10:06que marcarlas como obsoletas.
00:10:07Vamos paso a paso con esto, pero experimentando cada vez que podemos.
00:10:16Una de las cosas que amo de Nuxt, y hablamos del ecosistema de módulos
00:10:21y el hecho de que sea posible extenderlo.
00:10:24Significa que se pueden construir cosas así que no llegan al núcleo y no
00:10:28hace falta que lleguen; pueden ser un experimento.
00:10:31Pueden ser algo que la gente use en producción, en sus sitios, y podemos recibir
00:10:35comentarios, no solo conceptuales o sobre un RFC, sino comentarios prácticos
00:10:42en proyectos o casos de uso del mundo real.
00:10:46Antes de tener que tomar la decisión sobre si algo se convierte
00:10:53en un módulo del núcleo o no.
00:10:56No veo si hay alguna pregunta en el chat en vivo que
00:11:07podamos responder o...
00:11:08Yo tengo una; sé que ya has compartido parte de los secretos
00:11:15de lo que están haciendo, pero ¿hay algo próximo de Nuxt que te emocione
00:11:20especialmente y que puedas compartir?
00:11:32Hay muchas cosas que me emocionan, pero no quiero...
00:11:40una de las cosas es que trabajamos en tener todo listo para la versión
00:11:44Nuxt 5.
00:11:45Es algo de lo que hemos estado hablando por un tiempo.
00:11:47Nitro versión 3 es la función principal que esto trae, y preparar el
00:11:55ecosistema para este movimiento es un gran trabajo, pero va en la
00:12:01dirección correcta.
00:12:02Nitro nos acerca a los estándares web.
00:12:05Un servidor mínimo que se acerque lo más posible a lo nativo,
00:12:12sea donde sea, ya sea Bun, Deno, Node o lo que sea.
00:12:18Y creo que el cambio será algo que hará a la gente
00:12:24muy feliz; uso la versión 5 nightly localmente.
00:12:31Y ya es un placer usarlo, aunque todavía no esté
00:12:36en beta ni siquiera en alfa.
00:12:38Genial.
00:12:39Sé que hubo un comentario de la comunidad; alguien dijo estar muy emocionado por la V5.
00:12:45Y otra pregunta: ¿cuáles son tus mejores recomendaciones o consejos para
00:12:50optimizar cargas de trabajo de Nuxt en Vercel?
00:12:53Hugo, ¿quieres empezar con lo de optimizar Nuxt en Vercel? Porque...
00:13:07depende del sentido, ¿a qué te refieres con optimización? ¿Optimización
00:13:14de velocidad, de compilación, de ejecución?
00:13:19Sí, hay muchas formas, pero iré al menos por la parte
00:13:28del tiempo de ejecución.
00:13:29Y creo que algo que aún intentamos resolver es cómo en Nuxt podemos
00:13:36sugerir al usuario que esta página podría cachearse o renderizarse; es difícil
00:13:44ya que podemos tener componentes que obtienen datos y se usan en páginas.
00:13:49Puedes tener autenticación directamente en toda tu aplicación.
00:13:53En ese caso, no querrás cachear, o si empiezas a cachear páginas con
00:13:58autenticación, digamos que tienes un encabezado y muestras al usuario autenticado.
00:14:03Entonces quieres asegurarte de pre-renderizar un marcador de posición, para
00:14:09evitar este error de hidratación porque te diste cuenta en el lado del cliente
00:14:13de que estás autenticado.
00:14:14Así que diría que en Nuxt tenemos esta función muy potente que también viene
00:14:21de Nitro.
00:14:22Se llama "route rules" (reglas de ruta).
00:14:24Con estas reglas, podrás definir partes de las rutas usando patrones.
00:14:29Puedes decir: para este grupo, como un admin integrado en /admin,
00:14:35desactiva el SSR.
00:14:37No lo necesito para esta parte; para /blog/**,
00:14:45ponlas como ISR, porque no actualizamos los posts cada segundo.
00:14:50Así puedes aprovechar la generación estática incremental en Vercel.
00:14:55Con estas reglas de ruta, podrías optimizar parte de tus apps con solo
00:15:01unas líneas de configuración.
00:15:03Y esta sería mi mayor recomendación antes de pasar a producción.
00:15:10Revisa tus reglas de ruta.
00:15:12Genial.
00:15:13Gracias.
00:15:14Una cosa que... adelante.
00:15:18Oh, perdón.
00:15:20Algo que valdría la pena revisar es NPMX.
00:15:23NPMX, por si no lo conocen, es un sustituto de npmjs.com.
00:15:30Es un explorador para el registro de NPM, está construido en Nuxt, alojado
00:15:36en Vercel y lo hemos optimizado muchísimo para el rendimiento.
00:15:42Si buscas cómo optimizar algo en Vercel y quieres ver
00:15:45cómo se ven estas cosas en una app real diseñada para
00:15:49escalar a muchas visitas, porque mucha gente lo usa, échale un vistazo.
00:15:58Verás las reglas de ruta en acción, verás el almacenamiento en caché.
00:16:01Usamos caché con generación estática incremental.
00:16:09Básicamente construyendo y cacheando payloads cuando se requiere; usamos la nueva función
00:16:17de Nuxt 4.4, que es una caché de payload, incluso para páginas no pre-renderizadas, lo cual
00:16:27me parece genial.
00:16:28Significa que obtienes los beneficios de traer datos incluso antes de ir a una página.
00:16:34Los datos que necesitará esa página ya los trae el framework de antemano.
00:16:39Y eso permite una experiencia realmente rápida.
00:16:45Y hay muchas más cosas que podrías notar y tal vez probar en
00:16:52tu sitio web.
00:16:53Increíble.
00:16:54Gracias.
00:16:55Y también hemos recibido un comentario, alguien dijo: "Nunca he probado Nuxt,
00:17:03podría valer la pena intentarlo ahora".
00:17:04Así que tenemos a gente curiosa sobre Nuxt en la audiencia. Para ellos,
00:17:09¿cuál es la mejor manera de empezar con Nuxt?
00:17:12Sé que ya mencionamos algunas herramientas de IA, pero bueno,
00:17:16¿alguna recomendación al respecto?
00:17:17Creo que, justo ahora, ya tenemos los agentes de Nuxt, así que pueden darte
00:17:24muy buenos consejos sobre por dónde empezar si quieres usar una plantilla
00:17:29o empezar de cero usando la documentación.
00:17:31Tenemos muchas plantillas en Nuxt.com, pero también en Nuxt UI,
00:17:39y también tenemos Nuxt.new, que tiene otras plantillas, pero sí,
00:17:48podrías preguntarle directamente al agente ahora.
00:17:51También en la documentación de Nuxt UI, ya puedes abrir v0 si quieres
00:17:57solo chatear con el proyecto antes de llevarlo a un IDE y empezar a programar.
00:18:08Creo que a menudo al empezar... quiero decir, no he tenido problemas
00:18:12empezando de cero, pero personalmente me gusta clonar un proyecto mínimo.
00:18:17Tengo mi propia plantilla en GitHub: Daniel Rose slash Nuxt dash site dash
00:18:23template.
00:18:24Y puedes clonar eso.
00:18:25Es muy minimalista, pero tiene cosas como pruebas unitarias
00:18:31y detalles que sirven de guía para los LLM, indicando que quiero
00:18:37seguir construyendo el proyecto de esa manera.
00:18:38Me parece que esas plantillas mínimas son como cristales de siembra para
00:18:44los LLM.
00:18:45Lo orientan en la dirección correcta y le dan el rumbo necesario
00:18:50para que crezca de la forma que probablemente deseas.
00:18:52Y realmente no necesitas nada especial además de eso.
00:18:56Aunque puedes añadir cosas, no necesitas nada especial.
00:19:01Puedes empezar con una plantilla o un proyecto básico de Nuxt y decir:
00:19:09"Esto es lo que quiero construir".
00:19:10Y he descubierto que los LLM son fenomenales con eso.
00:19:12No tienen ningún problema.
00:19:14Así que lo principal, creo, con cualquier cosa nueva que pruebes, es crear
00:19:19oportunidades para aprender y no solo obtener los resultados, ¿verdad?
00:19:24Como, vale, se ve genial, pero ¿hasta qué punto sientes que has probado algo?
00:19:29No has probado Nuxt realmente; algo ha sido creado para ti.
00:19:33Así que, si puedes crear oportunidades para, tal vez, pedirle al LLM: "dame un recorrido",
00:19:40"enséñame las características de Nuxt usando lo que has construido".
00:19:45Cosas así son muy útiles porque conectan los puntos; es útil para ti
00:19:49mientras revisas el código que se ha creado.
00:19:51Y segundo, aprendes; adquieres nuevas habilidades y experiencia con algo.
00:19:56Cat Hicks, la Dra. Cat Hicks, búsquenla en GitHub.
00:20:02Ella ha creado algunas habilidades de Claude para generar oportunidades de aprendizaje
00:20:07con cualquier cosa que hagas, pequeños ejercicios de 10 minutos
00:20:12que te permiten intentar internalizar lo que tu agente está trabajando.
00:20:17Tenemos un acceso sin precedentes a conocimientos que antes no teníamos,
00:20:22pudiendo hacer cosas que quizá no sabíamos hacer hace seis meses.
00:20:29Lo clave es cómo seguimos creciendo y desarrollándonos como personas,
00:20:35y crear estos hábitos y descansos de aprendizaje es algo muy importante
00:20:41si queremos que nuestros cerebros sigan desarrollándose.
00:20:46Es un gran punto. Como usuario reciente de Nuxt también,
00:20:56viniendo principalmente de Svelte, hice que mi agente mapeara los conceptos
00:21:02de Svelte a Nuxt. Así que sí, definitivamente apoyo usar agentes para aprender.
00:21:08¿Alguien quiere añadir algo? Eso es genial, y creo que...
00:21:17estoy compartiendo mi pantalla otra vez. Nuxt es realmente un framework
00:21:26progresivo. Nos aseguramos de que puedas empezar con un proyecto mínimo,
00:21:32con un solo archivo app.vue. Esa es tu estructura principal.
00:21:40Y luego puedes añadir progresivamente rutas o peticiones de datos.
00:21:45Tenemos esta función de auto-importación, que fue una de las mejores mejoras
00:21:51en cuanto a experiencia de desarrollo. Y ahora con el auge de la IA,
00:21:56estamos pensando... de todos modos puedes desactivarlo si prefieres tener
00:22:03los imports directamente en tu código. Pero para mí es la mejor forma de empezar.
00:22:11También tenemos EVALS. Ejecutamos EVALS en Nuxt con diferentes modelos,
00:22:21y hasta ahora, incluso sin trucar al agente con .m skill o agent.md,
00:22:28son bastante buenos con la mayoría de los conocimientos de Nuxt. Además,
00:22:35si te interesa el MCP, tengo que comprobar dónde lo tenemos, pero sí,
00:22:49tenemos este servidor MCP que puedes añadir directamente a tu código.
00:22:57Estamos impulsados por IA, pero hasta ahora los agentes son bastante buenos.
00:23:03Lo que recomiendo es probar con una configuración mínima e ir añadiendo
00:23:10funciones paso a paso. Si usas IA, pídele que te explique por qué.
00:23:16Como dijo Daniel, es clave para mantener el cerebro activo.
00:23:25Exacto. Tenemos algunas preguntas más para terminar esta sección,
00:23:30una del chat: "Veo que Nuxt se usa mucho en el e-commerce alemán.
00:23:36¿Es Nuxt más popular en Europa que en EE. UU. o está equilibrado?"
00:23:42Bueno, yo estoy en Edimburgo, Sebastian y Hugo en Londres, y Maya,
00:23:51tú también estás en Europa. Siento que quizás soy la persona equivocada
00:23:57para preguntar sobre la popularidad en EE. UU., pero mi sensación es
00:24:02que es más popular en Europa. A veces funciona así: React suele ser
00:24:09más popular en Norteamérica y Vue en el resto del mundo.
00:24:15Y parece que ocurre lo mismo con Nuxt, pero debemos cambiar eso.
00:24:19Necesitamos más gente usando Nuxt en EE. UU., o un miembro del equipo de allí.
00:24:25Nuxt en todo el mundo. Sí. Siguiente pregunta de X: "Con Nuxt evolucionando
00:24:35rápido de la versión 3 a la 4 y 5, ¿cuál es la mejor estrategia para equipos
00:24:41para manejar migraciones a producción de forma segura, con SSR y Nitro?"
00:24:50Hasta ahora, no lo sabemos. Entre Nuxt 3 y Nuxt 4,
00:24:58creo que casi no hubo cambios disruptivos, o estaban muy bien documentados.
00:25:03Así que puedes pasarle la página a tu IA y pedirle que te ayude.
00:25:11E incluso sin IA, era bastante fácil migrar.
00:25:17Solo si usabas funciones muy específicas y avanzadas podías tener
00:25:21algún cambio disruptivo. Daniel se aseguró de que fuera una mejora fluida.
00:25:27Fue más difícil de la 2 a la 3, porque también tuvimos la actualización
00:25:33de Vue 2 a Vue 3, que era un framework y enfoque diferente con las composables.
00:25:40Y decidimos reescribir todo el motor del servidor para que pudieras trabajar
00:25:46en entornos serverless con rendimiento. Estas dos grandes reescrituras
00:25:53planeamos hacerlas en Nuxt. Así que la próxima versión mayor será accesible,
00:26:01y existe esta compatibilidad de puertos que hemos construido,
00:26:08lo que significa que puedes empezar a prepararte para V5 con antelación.
00:26:15Dejaré que Daniel continúe con esto.
00:26:22Creo que esa es la clave. Queremos ser compatibles hacia adelante
00:26:26y hacia atrás. Y creo que la actualización de la versión 3 a la 4
00:26:34fue deliberadamente para demostrar que no hay que temer a los cambios
00:26:39disruptivos en Nuxt, ni a las versiones mayores.
00:26:45A veces parece que uno se queda atascado diciendo: "Oh, no podemos
00:26:50lanzar una versión mayor". Nuestro plan es lanzar una nueva cada año,
00:26:57al menos. Y curiosamente, eso parece coincidir con muchos otros proyectos.
00:27:01Si miras a Node, por ejemplo, su nuevo calendario de lanzamientos
00:27:09asegura versiones mayores cada año, lo cual encaja bien con nosotros.
00:27:15En general, el patrón es que cuando usas Nuxt, lo usas para construir
00:27:21un proyecto como una casa. Tu proyecto está vivo; como una casa,
00:27:28necesita pintura nueva, retoques. Siempre quieres que tu web adopte
00:27:33las mejores prácticas de hoy, no solo las de cuando la escribiste.
00:27:38Por eso Nuxt debe seguir evolucionando para darte lo que necesitas.
00:27:46En los últimos meses hemos visto ataques a la cadena de suministro en NPM.
00:27:52Esto refuerza la necesidad de mantener todas tus dependencias al día
00:27:57y seguir la pista de lo más reciente que puedas.
00:28:03Nuestra responsabilidad como creadores de paquetes es asegurar que esos
00:28:08pasos de actualización sean lo menos dolorosos posible.
00:28:14Si al actualizar Nuxt te resulta doloroso, es un problema. Dímelo,
00:28:21quéjate por favor, porque no queremos que sea así.
00:28:25Queremos que la gente diga: "¡Qué alegría! Me tomó medio día
00:28:29hacer esta actualización mayor, no dos meses". Queremos optimizar eso
00:28:36por muchas razones, no solo por lo que las webs necesitan, sino por el
00:28:42ecosistema. Queremos que la gente no tema a esas actualizaciones.
00:28:47Y si quieres contactar a Daniel, está en BlueSky en row.dev.
00:28:54Puedes encontrarme en casi todas partes. Increíble. Bien dicho, gracias.
00:29:01Y quiero terminar nuestras preguntas hablando de la comunidad.
00:29:07Hace poco vi una foto de una conferencia donde uno de ustedes hablaba
00:29:11y había una imagen de una comunidad que decía algo así como que Nuxt
00:29:16trata sobre las personas. Parece que tienen una comunidad increíble.
00:29:20Cuéntennos sobre ellos, cómo involucrarse, contribuir, etc.
00:29:30Creo que Daniel se ha congelado. Sí, creo que era Daniel en Vue.js Amsterdam.
00:29:40Y sí, diría que si quieren unirse a nosotros, tenemos el servidor de Discord
00:29:47que es muy activo y donde compartimos muchas noticias.
00:29:54Tenemos GitHub, donde se reportan problemas y se escribe el código.
00:30:00Ahí es donde se implementan y comparten las ideas.
00:30:07Si quieres ayudar, puedes colaborar con los reportes, dar ideas,
00:30:15compartir tu experiencia o demos. Tenemos la cuenta de Twitter @nuxt_js,
00:30:20cuenta en BlueSky, usamos nuxt.com, tenemos Mastodon y una página
00:30:26en LinkedIn. No tenemos Instagram ni SoundCloud,
00:30:31pero Discord es un buen lugar para pasar el rato. Si tienes alguna
00:30:39pregunta, chatea con nosotros, allí estamos.
00:30:46Y creo que toda la gente con la que compartimos los módulos creados...
00:30:51no necesitas contribuir directamente al núcleo. Esa es la belleza de Nuxt:
00:30:54puedes empezar con una plantilla que quieras compartir, o con un módulo
00:31:00porque construiste una función específica y quieres compartirla
00:31:05con toda la comunidad. Tenemos más de 300 módulos mantenidos
00:31:10para la versión actual y más de 1000 colaboradores. Así que, por favor,
00:31:17vengan a pasar el rato con nosotros. Lo disfrutarán. ¡Vamos!
00:31:27Daniel, no podemos oírte. Pero creo que dijo que sí tenemos SoundCloud.
00:31:51Tal vez estaba preparando el primer tema para SoundCloud.
00:31:55Solo quiero decir que me alegra que sacaras el tema de la comunidad.
00:32:05Creo que es lo mejor de Nuxt. Y creo que de eso trata
00:32:13el código abierto, porque el código abierto es tomar algo
00:32:17y decirle a alguien más: "Oye, ¿qué piensas de esto? ¿Te gusta?
00:32:21¿Quieres ayudar a mejorarlo?" Esa comunidad es lo que hace que
00:32:26valga la pena el código abierto. Es el sentido de todo.
00:32:32Creo firmemente que el archivo contributing.md es más importante
00:32:38que el agents.md. Preferiría tener cero agentes y mucha gente que al revés.
00:32:44Lo que hace que valga la pena es que hay personas que me importan
00:32:50formando parte del proyecto. Y eso ha sido cierto no solo para Nuxt,
00:32:56sino también para la comunidad de Vue, por ejemplo.
00:33:00Sí, todo gira en torno a la comunidad, y siempre es maravilloso ver
00:33:06a gente nueva unirse y empezar a contribuir. Y eso incluye
00:33:12venir a pedir ayuda también. Así fue como yo me involucré,
00:33:18entrando y molestando a la gente en Discord para encontrar respuestas.
00:33:23Me encanta. ¡Vivan los humanos y la comunidad! Puedes lanzar cosas
00:33:28y compartirlas con el mundo. Nos encanta verlo.
00:33:34Vamos a ir terminando. Me inspira mucho el ritmo y la calidad
00:33:40de lo que están lanzando, estoy muy emocionada por el viaje de Nuxt.
00:33:45Gracias a ustedes, al resto del equipo de Nuxt, colaboradores
00:33:50y por supuesto a la comunidad. Gracias, Sebastian, Daniel y Hugo
00:33:55por acompañarnos hoy.
00:33:56Gracias.
00:33:57Gracias.
00:33:58Adiós.
00:33:59Y audiencia, una cosa más. No se vayan. Quiero presentar a Eve
00:34:07de la Vercel Academy.
00:34:08Hola, Maya.
00:34:09Hola, Eve. Bienvenida de nuevo.
00:34:11Muchas gracias. Es la parte más divertida de mi mes: lanzar un curso,
00:34:18hacer poco y escuchar a todos hablar. Ese equipo es el mejor (GOAT).
00:34:25Pero sí, tú también eres de las mejores. Me encantaría saber más
00:34:36sobre lo que has preparado con el nuevo curso.
00:34:40Sí, estamos muy emocionados de lanzar hoy un nuevo curso.
00:34:48Se llama "Nuxt on Vercel". Es un curso para gente acostumbrada
00:34:55al mundo de React y ofrece esa capa de traducción hacia proyectos Nuxt.
00:35:03Si estás empezando un nuevo trabajo o proyecto personal y quieres
00:35:08usar esto pero no sabes por dónde empezar, este es el camino.
00:35:12Por supuesto, los agentes también te ayudarán y debes usar todas esas herramientas,
00:35:16pero esto te ayuda a construir un proyecto. Hacemos una aplicación
00:35:24para buscar aguas termales y rutas de senderismo favoritas.
00:35:30Echen un vistazo, vienen muchos cursos nuevos a Vercel Academy.
00:35:34Increíble. Muchas gracias, Eve. Para la audiencia, Eve tiene los mejores
00:35:40cursos y realmente aplica lo de "construir para aprender".
00:35:45Vayan a verlo, añadiremos un enlace para facilitarlo. Estoy emocionada
00:35:50por hacerlo yo misma y construir más con Nuxt. Gracias por venir hoy.
00:35:59Gracias. Estamos al final de nuestra sesión comunitaria.
00:36:03Gracias a todos por pasar tiempo con nosotros. Esperamos que lo disfrutaran.
00:36:09Pueden encontrar detalles de futuras sesiones en [community.vercel.com/live](https://community.vercel.com/live).
00:36:16Tenemos muchos eventos en camino, consulten nuestra página de eventos
00:36:20y de meetups para los eventos online y en su zona. Por último,
00:36:26ya están disponibles las entradas para Vercel Ship, que se celebrará
00:36:32en distintas partes del mundo. Muy emocionante, visiten [vercel.com/ship](https://vercel.com/ship)
00:36:37y soliciten sus entradas. Vale la pena visitarla solo por el diseño.
00:36:43El equipo se ha lucido con eso. Eso es todo por mi parte. ¡Gracias a todos!
00:36:47Que tengan un buen día. Adiós.

Key Takeaway

Nuxt evoluciona hacia una plataforma optimizada para agentes de IA mediante servidores MCP, sintaxis de Markdown ejecutable con Comark y estrategias de AEO que reducen la ventana de contexto para rastreadores modernos.

Highlights

  • Nuxt integra capacidades de servidores MCP (Model Context Protocol) para conectar sitios web directamente con agentes de IA.

  • El proyecto Comark permite el uso de Markdown con componentes ejecutables en tiempo de ejecución para generar landing pages mediante streaming de IA.

  • Las optimizaciones de AEO (AI Engine Optimization) en Nuxt.com detectan rastreadores de IA mediante el encabezado Accept y sirven contenido optimizado en Markdown o JSON-LD.

  • La versión 5 de Nuxt se centra en Nitro 3 para ofrecer un servidor mínimo alineado con los estándares web nativos de Bun, Deno y Node.

  • Las reglas de ruta (route rules) en Nuxt permiten configurar ISR (Incremental Static Regeneration) en Vercel para optimizar el rendimiento sin sacrificar la autenticación del usuario.

  • NPMX funciona como un caso de estudio real de Nuxt en Vercel que utiliza caché de payload de Nuxt 4.4 para precargar datos antes de la navegación del usuario.

Timeline

Integración de Agentes y Servidores MCP

  • Cualquier sitio desarrollado con Nuxt puede funcionar como un servidor MCP gracias al kit de herramientas desarrollado por el equipo.
  • Nuxt.com centraliza APIs de módulos y servidores MCP para integrarse con diversas herramientas de inteligencia artificial.
  • El código fuente de los agentes implementados es abierto para facilitar la contribución comunitaria y el aprendizaje técnico.

La arquitectura de Nuxt permite que los sitios web no sean solo destinos para humanos, sino también proveedores de datos para modelos de lenguaje. Se destaca la implementación de componentes laterales que muestran el razonamiento de la IA en tiempo real. Esta infraestructura facilita que herramientas externas interactúen con la lógica interna de los módulos de Nuxt.

Análisis de Datos y el Proyecto Comark

  • Un panel de administración basado en MCP permite consultar mediante lenguaje natural las páginas con mayor tasa de errores o peor rendimiento.
  • Comark es una colaboración entre los equipos de Nuxt y SvelteKit para estandarizar Markdown con componentes en tiempo de ejecución.
  • La IA puede generar páginas completas transmitiendo sintaxis de componentes específicos que el sistema renderiza durante el streaming.

El uso de widgets de comentarios en el sitio web alimenta un sistema de análisis que los desarrolladores consultan a través de un agente administrativo. Comark extrae el núcleo de Nuxt Content para ofrecer una solución agnóstica que soporta autocierre de etiquetas y streaming de contenido. Esta tecnología permite enseñar a los modelos de IA a estructurar páginas de aterrizaje complejas de forma dinámica.

Optimización para Motores de IA (AEO)

  • Nuxt implementa AEO para mejorar la visibilidad del contenido cuando los usuarios utilizan agentes o altavoces inteligentes en lugar de buscadores tradicionales.
  • El sistema detecta agentes de IA mediante el encabezado Accept y entrega versiones de texto moderno para minimizar el consumo de tokens en la ventana de contexto.
  • La inclusión de JSON-LD y metadatos específicos ayuda a los rastreadores de IA a comprender la jerarquía y el propósito del contenido técnico.

El enfoque de SEO tradicional se expande para cubrir la interacción con modelos generativos mediante optimizaciones en los repositorios oficiales. Los desarrolladores experimentan con la entrega de Markdown directo a los bots para facilitar el procesamiento de la documentación. Estas funciones se prueban primero como módulos externos antes de considerar su integración en el núcleo del framework para evitar la obsolescencia rápida.

Ruta hacia Nuxt 5 y Nitro 3

  • Nitro 3 es el motor central de Nuxt 5 y busca la paridad total con los estándares web nativos.
  • La nueva versión del servidor está diseñada para ejecutarse de forma idéntica en entornos Bun, Deno o Node.
  • El desarrollo de Nuxt 5 prioriza un servidor minimalista que reduce la sobrecarga de abstracción en la ejecución.

El equipo trabaja en la transición del ecosistema hacia la versión 5, que ya cuenta con versiones nocturnas funcionales para pruebas locales. El objetivo principal es garantizar que el servidor sea lo más cercano posible al código nativo, mejorando la portabilidad entre diferentes plataformas de ejecución. Esta actualización representa un esfuerzo significativo para simplificar la infraestructura interna del framework.

Estrategias de Optimización en Vercel

  • Las route rules permiten desactivar el SSR en secciones administrativas y activar ISR en blogs con solo unas líneas de configuración.
  • NPMX sirve como referencia técnica para implementar almacenamiento en caché y generación estática incremental a gran escala.
  • La caché de payload de Nuxt 4.4 permite que el framework precargue los datos de una página antes de que el usuario haga clic.

Optimizar cargas de trabajo en Vercel requiere un uso estratégico de las reglas de ruta para equilibrar el contenido estático y dinámico. Se recomienda el uso de marcadores de posición (placeholders) para evitar errores de hidratación en páginas que requieren autenticación del lado del cliente. El proyecto NPMX demuestra cómo estas técnicas permiten manejar altos volúmenes de tráfico manteniendo una experiencia de usuario rápida.

Aprendizaje y Migración Segura

  • Las plantillas mínimas actúan como 'cristales de siembra' que guían a los modelos de IA para generar código coherente con las mejores prácticas.
  • La estrategia de versiones de Nuxt contempla lanzamientos mayores anuales para alinearse con el ciclo de vida de Node.js.
  • La migración de Nuxt 3 a 4 se diseñó para evitar cambios disruptivos, facilitando una actualización fluida en entornos de producción.

Para aprender Nuxt se sugiere empezar con proyectos mínimos de un solo archivo app.vue y añadir funciones progresivamente. El uso de agentes de IA es efectivo si se les pide explicar el razonamiento detrás del código para fortalecer la comprensión del desarrollador. El equipo enfatiza que las actualizaciones mayores no deben ser traumáticas, buscando que el proceso de actualización tome horas en lugar de meses.

Ecosistema y Comunidad

  • Discord y GitHub son los centros principales para el reporte de problemas, el intercambio de demos y la colaboración en el código.
  • El archivo contributing.md se considera más vital que cualquier configuración de IA para la salud a largo plazo del proyecto.
  • Vercel Academy lanza un curso específico de Nuxt para desarrolladores que vienen del ecosistema React.

La filosofía de código abierto en Nuxt se centra en la extensibilidad, permitiendo que funciones avanzadas existan como módulos sin sobrecargar el núcleo. La comunidad europea mantiene una fuerte presencia, aunque se busca expandir la adopción en Norteamérica. El cierre de la sesión destaca nuevos recursos educativos y eventos globales como Vercel Ship para fomentar la participación de nuevos usuarios.

Community Posts

View all posts