Nuxt en el Edge

Rate this content
Bookmark

Aprende cómo construir una aplicación Vue implementada en el edge para brindar una experiencia ultrarrápida a tus usuarios finales.

FAQ

Nuxt es un marco web utilizado para crear aplicaciones de vista de pila completa. Ofrece funcionalidades como el renderizado del lado del servidor, del lado del cliente, generación de sitios estáticos y renderizado en el edge, entre otros.

Nuxt Labs ofrece servicios de consultoría y auditorías, y es ideal para migraciones de Nuxt 2 a Nuxt 3. Además, desarrollan herramientas como Volta para la gestión de proyectos sobre GitHub.

El renderizado en el edge se refiere a la ejecución de aplicaciones en nodos CDN cerca del usuario final, lo que reduce la latencia y mejora el rendimiento. Este enfoque fue popularizado por los trabajadores de Cloudflare y permite replicar el código en la red de forma eficiente y económica.

Nuxt incluye características como sistema de hooks, auto-importación, middleware, gestión del estado, TypeScript, y componentes isla experimentales, entre otros.

Volta es una herramienta de gestión de proyectos construida sobre GitHub, diseñada para ayudar en el desarrollo de Nuxt 3 y su estabilización como una versión madura y estable.

El renderizado en el edge ofrece ventajas como baja latencia, no requiere mantenimiento de servidores, se escala automáticamente y es más económico, costando aproximadamente 50 centavos por millón de solicitudes con un nivel gratuito disponible.

El renderizado en el edge presenta desafíos como limitaciones en el tamaño total del código y diferencias en el entorno de ejecución comparado con Node y el navegador, usando principalmente el motor V8 para el análisis del código JavaScript.

Sebastien Chopin
Sebastien Chopin
30 min
12 May, 2023

Comments

Sign in or register to post your comment.

Video Summary and Transcription

Nuxt es un marco web con muchas características, incluyendo renderizado del lado del servidor, renderizado del lado del cliente, generación de sitios estáticos, renderizado en el edge y más. El Edge es un entorno limitado que se ejecuta en nodos CDN, como la red de Cloudflare. Las opciones de base de datos en el Edge incluyen Postgre con Neon, Versel en Neon, Superbase, MySQL con escala de plan, HyperDB y KV con redis y almacenamiento de Cloudflare. El orador demuestra cómo crear una demostración con una tabla de votos, manejar solicitudes de API, agregar autenticación, guardar votos y mostrar resultados. La hoja de ruta hacia un Nuxt 3 de pila completa con una experiencia en el edge está en progreso. Copilot es una herramienta útil para los desarrolladores. La integración de SSO con GitHub y la mejora de la experiencia del desarrollador son consideraciones importantes para Nuxt 3.

Available in English: Nuxt on the Edge

1. Introducción a Nuxt y Edge

Short description:

Hola a todos. Voy a hablar sobre Nuxt en el edge y lo que significa. Nuxt es un marco web con muchas características, incluyendo renderizado del lado del servidor, renderizado del lado del cliente, generación de sitios estáticos, renderizado en el edge, sistema de hooks, enrutador del sistema de archivos, auto-importación, obtención de datos, middleware, complementos, diseños, transiciones, API del servidor, TypeScript, gestión del estado, componente isla, sistema de capas, preprocesador para Stylus y SAS, ecosistema de módulos, pruebas, procesadores y más. El Edge es un entorno limitado que se ejecuta en nodos CDN, como la red de Cloudflare con aproximadamente 200 nodos. Es rápido, económico, escalable y asequible en comparación con el servidor sin servidor Lambda. Otra opción es dnodeploy.legon.app, que es de código abierto.

Hola a todos. Estoy muy contento de estar aquí. No tendré mucho tiempo, así que iré directamente al grano. Voy a hablar sobre Nuxt en el edge y lo que significa. Estoy en Inoox, también conocido como Sebastian Chopin, que es mi nombre real. Soy CEO de Nuxt Labs y hacemos cosas como consultoría y auditorías. También es bueno si quieres migrar de Nuxt 2 a Nuxt 3. También desarrollamos Volta, que es una gestión de proyectos construida sobre GitHub y nos ayudó a desarrollar Nuxt 3 y convertirlo en una versión estable. Y recientemente, Nuxt Studio está utilizando Nuxt y Nuxt Content con Live Edition. Nuxt es un marco web para crear aplicaciones de vista de pila completa. Entonces, la pregunta que le hiciste a Daniel sobre la experiencia de pila completa definitivamente está en nuestro plan de trabajo, pero tuvimos que estabilizar el marco, convertirlo en un buen marco para el desarrollo front-end antes de sumergirnos en la experiencia de pila completa. También tenemos muchas características. En caso de que no conozcas Nuxt, tenemos renderizado del lado del servidor, renderizado del lado del cliente, generación de sitios estáticos, renderizado en el edge, sistema de hooks, enrutador del sistema de archivos, auto-importación, si eres perezoso como yo. Obtención de datos, middleware, complementos, diseños, transiciones, API del servidor, TypeScript, gestión del estado. Tenemos una gestión del estado predeterminada, pero obviamente puedes usar PNU of UX. Tenemos el componente isla que es experimental pero muy prometedor en cuanto a los componentes del servidor. El sistema de capas, no sé si algunos de ustedes han utilizado capas internamente. Algunas personas, básicamente es una aplicación Nuxt que puedes publicar en NPM y puedes extender. Tenemos preprocesador para Stylus, SAS, el ecosistema de módulos, como has escuchado, pruebas, procesadores y muchas otras características que no te mostraré hoy.

El Edge, ¿quién ya ha implementado en el Edge? Uno, dos, ok. Cinco personas de cada 10 personas. Es un entorno limitado y se ejecuta en nodos CDN. Fue impulsado por los trabajadores de Cloudflare hace unos años y, básicamente, cuando implementas tu código, se replica en la red. Aquí, es la red de Cloudflare y hay alrededor de 200 nodos. Renderiza rápidamente tu código y es muy económico de alojar. Se ejecuta en milisegundos desde el usuario final, esté donde esté en el mundo. No tienes llamadas de inicio de milisegundos, no hay servidor que mantener, se escala automáticamente y es asequible en comparación con, no es un engaño, pero el servidor sin servidor Lambda que puede costarte mucho dinero. Aquí, estamos hablando de 50 centavos por millón de solicitudes y tienen un nivel gratuito para 100,000 solicitudes al mes. Pero el trabajador de Cloudflare no es el

2. Introducción a las Funciones de Edge

Short description:

Se recomienda revisar Vercel Edge function, Netlify Edge function, Edge.io, StackPath y más. Tiene limitaciones y es diferente a Node y al navegador. Mayormente utiliza el motor V8 para analizar el código JavaScript. Los complementos eran desafiantes en el pasado, pero ahora las personas están más familiarizadas con la creación de complementos JavaScript universales. El tiempo de ejecución de Edge tiene limitaciones pero también ventajas, lo que lo convierte en un compromiso.

solo uno. Hoy en día, tenemos dnodeploy.legon.app, que también es de código abierto. Recomiendo encarecidamente que revises Vercel Edge function basado en Cloudflare, Netlify Edge function, Edge.io, StackPath y muchos más que están por venir. Pero tiene limitaciones. Es diferente a Node y al navegador. Mayormente utiliza el motor V8 para analizar tu código JavaScript. Hace unos seis años, no podías usar Window en Node. Y no puedes usar el sistema de archivos en el navegador. Cuando trabajabas en complementos, era una experiencia difícil. Pero hoy en día, las personas están más acostumbradas a crear complementos JavaScript universales. Es similar para el Runtime de Edge. Tienes

QnA

Check out more articles and videos

We constantly think of articles and videos that might spark Git people interest / skill us up or help building a stellar career

Una Guía del Comportamiento de Renderizado de React
React Advanced Conference 2022React Advanced Conference 2022
25 min
Una Guía del Comportamiento de Renderizado de React
Top Content
React es una biblioteca para "renderizar" UI a partir de componentes, pero muchos usuarios se encuentran confundidos acerca de cómo funciona realmente el renderizado de React. ¿Qué significan términos como "renderizado", "reconciliación", "Fibers", y "committing"? ¿Cuándo ocurren los renderizados? ¿Cómo afecta el Contexto al renderizado, y cómo las bibliotecas como Redux causan actualizaciones? En esta charla, aclararemos la confusión y proporcionaremos una base sólida para entender cuándo, por qué, y cómo React renderiza. Veremos: - Qué es realmente el "renderizado" - Cómo React encola los renderizados y el comportamiento de renderizado estándar - Cómo se utilizan las claves y los tipos de componentes en el renderizado - Técnicas para optimizar el rendimiento del renderizado - Cómo el uso del contexto afecta al comportamiento del renderizado - Cómo las bibliotecas externas se integran en el renderizado de React
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Vue.js London Live 2021Vue.js London Live 2021
34 min
Todo Más Allá de la Gestión de Estado en Tiendas con Pinia
Top Content
Cuando pensamos en Vuex, Pinia, o tiendas en general, a menudo pensamos en la gestión de estado y los patrones Flux, pero no solo las tiendas no siempre siguen el patrón Flux, ¡hay mucho más en las tiendas que las hace valer la pena usar! Plugins, Devtools, renderizado en el lado del servidor, integraciones TypeScript... Vamos a sumergirnos en todo más allá de la gestión de estado con Pinia con ejemplos prácticos sobre plugins y Devtools para sacar el máximo provecho de tus tiendas.
Compilador React Forget - Entendiendo React Idiomático
React Advanced Conference 2023React Advanced Conference 2023
33 min
Compilador React Forget - Entendiendo React Idiomático
Top Content
React ofrece un contrato a los desarrolladores: cumple ciertas reglas y React puede actualizar eficiente y correctamente la interfaz de usuario. En esta charla exploraremos estas reglas en profundidad, entendiendo el razonamiento detrás de ellas y cómo desbloquean nuevas direcciones como la memoización automática.
Acelerando tu aplicación React con menos JavaScript
React Summit 2023React Summit 2023
32 min
Acelerando tu aplicación React con menos JavaScript
Top Content
¿Demasiado JavaScript te está agobiando? Los nuevos marcos que prometen no usar JavaScript parecen interesantes, pero tienes una aplicación React existente que mantener. ¿Qué tal si Qwik React es tu respuesta para un inicio de aplicaciones más rápido y una mejor experiencia de usuario? Qwik React te permite convertir fácilmente tu aplicación React en una colección de islas, que pueden ser renderizadas en el servidor y rehidratadas con retraso, e incluso en algunos casos, se puede omitir la rehidratación por completo. Y todo esto de manera incremental sin una reescritura.
Bienvenido a Nuxt 3
Vue.js London Live 2021Vue.js London Live 2021
29 min
Bienvenido a Nuxt 3
Top Content
Explica sobre la refactorización del código base de NuxtJS y los desafíos que enfrenta para implementar Vue 3, Vite y otros paquetes.
Un Año en Vue 3
Vue.js London Live 2021Vue.js London Live 2021
20 min
Un Año en Vue 3
Top Content
Vue 3 puede sonar aún nuevo para muchos usuarios, pero en realidad ya ha sido lanzado hace más de un año. ¿Cómo evolucionó Vue 3 durante este período? ¿Por qué tardó tanto en ponerse al día el ecosistema? ¿Qué aprendimos de este proceso? ¿Qué viene después? ¡Discutiremos estas preguntas en esta charla!

Workshops on related topic

Masterclass de Depuración de Rendimiento de React
React Summit 2023React Summit 2023
170 min
Masterclass de Depuración de Rendimiento de React
Top Content
Featured WorkshopFree
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Vería una interacción lenta, intentaría una optimización aleatoria, vería que no ayudaba, y seguiría intentando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Haría una grabación en Chrome DevTools o React Profiler, la examinaría, intentaría hacer clic en cosas aleatorias, y luego la cerraría frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos a analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, estaremos cubriendo el rendimiento de la interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Vue.js London Live 2021Vue.js London Live 2021
169 min
Vue3: Desarrollo Moderno de Aplicaciones Frontend
Top Content
Featured WorkshopFree
Mikhail Kuznetcov
Mikhail Kuznetcov
Vue3 fue lanzado a mediados de 2020. Además de muchas mejoras y optimizaciones, la principal característica que trae Vue3 es la API de Composición, una nueva forma de escribir y reutilizar código reactivo. Aprendamos más sobre cómo usar la API de Composición de manera eficiente.

Además de las características principales de Vue3, explicaremos ejemplos de cómo usar bibliotecas populares con Vue3.

Tabla de contenidos:
- Introducción a Vue3
- API de Composición
- Bibliotecas principales
- Ecosistema Vue3

Requisitos previos:
IDE de elección (Inellij o VSC) instalado
Nodejs + NPM
Construyendo aplicaciones web que iluminan Internet con QwikCity
JSNation 2023JSNation 2023
170 min
Construyendo aplicaciones web que iluminan Internet con QwikCity
Featured WorkshopFree
Miško Hevery
Miško Hevery
Construir aplicaciones web instantáneas a gran escala ha sido elusivo. Los sitios del mundo real necesitan seguimiento, análisis y interfaces y interacciones de usuario complejas. Siempre comenzamos con las mejores intenciones pero terminamos con un sitio menos que ideal.
QwikCity es un nuevo meta-framework que te permite construir aplicaciones a gran escala con un rendimiento de inicio constante. Veremos cómo construir una aplicación QwikCity y qué la hace única. El masterclass te mostrará cómo configurar un proyecto QwikCity. Cómo funciona el enrutamiento con el diseño. La aplicación de demostración obtendrá datos y los presentará al usuario en un formulario editable. Y finalmente, cómo se puede utilizar la autenticación. Todas las partes básicas para cualquier aplicación a gran escala.
En el camino, también veremos qué hace que Qwik sea único y cómo la capacidad de reanudación permite un rendimiento de inicio constante sin importar la complejidad de la aplicación.
Next.js 13: Estrategias de Obtención de Datos
React Day Berlin 2022React Day Berlin 2022
53 min
Next.js 13: Estrategias de Obtención de Datos
Top Content
WorkshopFree
Alice De Mauro
Alice De Mauro
- Introducción- Prerrequisitos para la masterclass- Estrategias de obtención: fundamentos- Estrategias de obtención – práctica: API de obtención, caché (estática VS dinámica), revalidar, suspense (obtención de datos en paralelo)- Prueba tu construcción y sírvela en Vercel- Futuro: Componentes de servidor VS Componentes de cliente- Huevo de pascua de la masterclass (no relacionado con el tema, destacando la accesibilidad)- Conclusión
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Vue.js London Live 2021Vue.js London Live 2021
117 min
Usando Nitro - Construyendo una Aplicación con el Último Motor de Renderizado de Nuxt
Top Content
Workshop
Daniel Roe
Daniel Roe
Construiremos un proyecto Nuxt juntos desde cero usando Nitro, el nuevo motor de renderizado de Nuxt, y Nuxt Bridge. Exploraremos algunas de las formas en que puedes usar y desplegar Nitro, mientras construimos una aplicación juntos con algunas de las restricciones del mundo real que enfrentarías al desplegar una aplicación para tu empresa. En el camino, dispara tus preguntas hacia mí y haré lo mejor para responderlas.
Depuración del Rendimiento de React
React Advanced Conference 2023React Advanced Conference 2023
148 min
Depuración del Rendimiento de React
Workshop
Ivan Akulov
Ivan Akulov
Los primeros intentos de Ivan en la depuración de rendimiento fueron caóticos. Veía una interacción lenta, probaba una optimización aleatoria, veía que no ayudaba, y seguía probando otras optimizaciones hasta que encontraba la correcta (o se rendía).
En aquel entonces, Ivan no sabía cómo usar bien las herramientas de rendimiento. Hacía una grabación en Chrome DevTools o React Profiler, la examinaba, intentaba hacer clic en cosas al azar, y luego la cerraba frustrado unos minutos después. Ahora, Ivan sabe exactamente dónde y qué buscar. Y en esta masterclass, Ivan te enseñará eso también.
Así es como va a funcionar. Tomaremos una aplicación lenta → la depuraremos (usando herramientas como Chrome DevTools, React Profiler, y why-did-you-render) → identificaremos el cuello de botella → y luego repetiremos, varias veces más. No hablaremos de las soluciones (en el 90% de los casos, es simplemente el viejo y regular useMemo() o memo()). Pero hablaremos de todo lo que viene antes - y aprenderemos cómo analizar cualquier problema de rendimiento de React, paso a paso.
(Nota: Esta masterclass es más adecuada para ingenieros que ya están familiarizados con cómo funcionan useMemo() y memo() - pero quieren mejorar en el uso de las herramientas de rendimiento alrededor de React. Además, cubriremos el rendimiento de interacción, no la velocidad de carga, por lo que no escucharás una palabra sobre Lighthouse 🤐)