Desarrollo con Nuxt.js

¿Qué es Nuxt?

Nuxt es un framework de Vue.js que maneja todo lo que una aplicación de producción necesita: renderizado del lado del servidor, generación de sitios estáticos, enrutamiento basado en sistema de archivos, gestión de estado y rutas de API de servidor -- con casi ninguna configuración. Donde Vue simple requiere ensamblar estas piezas por ti mismo, Nuxt las proporciona como un sistema coherente y con opinión.

La característica definitoria es la flexibilidad de renderizado. Una única aplicación Nuxt puede servir diferentes rutas con diferentes estrategias de renderizado: renderizar el lado del servidor la página principal para SEO, pre-renderizar estáticamente las publicaciones del blog en tiempo de compilación y renderizar en el cliente el panel de control del usuario autenticado. Este es el modo de renderizado híbrido de Nuxt, configurado por ruta en nuxt.config.ts.

Enrutamiento basado en sistema de archivos

Nuxt genera rutas automáticamente desde tu directorio pages/. No se necesita archivo de configuración de rutas. Un archivo en pages/blog/[slug].vue se convierte en /blog/:slug. Un archivo en pages/about.vue se convierte en /about. Los directorios anidados crean rutas anidadas.

Esto se extiende a la capa del servidor. Los archivos en server/api/ se convierten en puntos finales de API. server/api/posts.get.ts se convierte en un manejador GET /api/posts. Full-stack en un proyecto, con TypeScript en todo.

La misma convención se aplica a:

• composables/: Composables de Vue auto-importados -- useFetch, useState, useAsyncData
• middleware/: Middleware de ruta que se ejecuta antes de la navegación
• layouts/: Componentes de diseño compartidos que envuelven páginas
• plugins/: Código que se ejecuta en la inicialización de la aplicación
• components/: Componentes de Vue auto-importados sin declaraciones de importación explícitas

Modos de renderizado

SSR (renderizado del lado del servidor): Modo predeterminado. El HTML se renderiza en el servidor por solicitud. Bueno para contenido dinámico, personalización y páginas autenticadas. Impulsado por el motor del servidor Nitro.

SSG (generación de sitios estáticos): Las páginas se pre-renderizan en tiempo de compilación. La salida es HTML estático servido desde un CDN. Configurado con nitro.prerender.routes o estableciendo ssr: false en el nivel de ruta.

Renderizado híbrido: Diferentes rutas utilizan diferentes estrategias. routeRules en nuxt.config.ts te permite establecer prerender, ssr, TTL de caché, redireccionamiento y reglas de CORS por ruta. Esta es la característica más poderosa y subutilizada de Nuxt.

Modo SPA: Renderizado completamente del lado del cliente. Útil para paneles de administración o paneles de control donde SEO no es una preocupación y la interactividad es la prioridad.

Qué construimos con Nuxt

Sitios de marketing y plataformas de contenido

Nuxt con SSG o renderizado híbrido es una combinación sólida para sitios de marketing. Las rutas de contenido se pre-renderizan para rendimiento y SEO. Las rutas dinámicas -- búsqueda, filtros, recomendaciones personalizadas -- utilizan SSR o obtención del lado del cliente. El resultado es un sitio rápido, amigable con SEO e interactivo donde sea necesario.

Aplicaciones web full-stack

La capa del servidor de Nuxt (Nitro) maneja rutas de API, middleware, conexiones a bases de datos y lógica del lado del servidor en el mismo proyecto que el frontend. Este es un framework genuinamente full-stack -- lo usamos para aplicaciones donde un servidor API separado agregaría complejidad innecesaria.

Nuxt con CMS headless

Nuxt se integra limpiamente con CMS headless: Strapi, Contentful, Sanity y DatoCMS tienen módulos oficiales o comunitarios de Nuxt. Configuramos la capa de datos, establecemos almacenamiento en caché ISR para rutas de contenido y conectamos el webhook del CMS a un disparador de reconstrucción de Nuxt.

Migraciones de Vue a Nuxt

Los equipos con SPAs de Vue.js existentes que necesitan SSR para SEO a menudo migran a Nuxt. El modelo de componentes es idéntico -- la migración es principalmente reestructuración del enrutamiento y adición de obtención de datos del lado del servidor. Manejamos estas migraciones y preservamos toda la lógica de componentes existente.

El motor del servidor Nitro

El motor Nitro de Nuxt maneja el renderizado del lado del servidor y las rutas de API. Es agnóstico del framework: la misma aplicación Nuxt puede implementarse en Node.js, Cloudflare Workers, AWS Lambda, Funciones de Edge de Vercel o Netlify sin cambios de código. Esta flexibilidad de implementación es una ventaja operacional significativa.

Ecosistema de módulos de Nuxt

El sistema de módulos de Nuxt agrega capacidades con configuración mínima:

• @nuxt/content: CMS basado en archivos usando Markdown/YAML/JSON. Ideal para sitios de documentación y blogs.
• @nuxt/image: Optimización automática de imágenes, conversión de formato y carga perezosa.
• @pinia/nuxt: Gestión de estado de Pinia, auto-importada y compatible con SSR.
• @nuxtjs/i18n: Internacionalización con enrutamiento basado en locale.
• @nuxtjs/tailwindcss: Integración de Tailwind CSS.
• nuxt-security: Encabezados de seguridad, protección CSRF, limitación de velocidad.

Seleccionamos y configuramos módulos basados en requisitos del proyecto. Sin exceso de módulos.

Nuxt vs Next.js

Ambos son meta-frameworks de grado de producción. La elección es principalmente sobre el conocimiento existente de tu equipo y preferencia por Vue vs React.

Elige Nuxt cuando:

• Tu equipo conoce Vue.js y prefiere su modelo de componentes
• Quieres valores predeterminados con baterías incluidas con menos configuración
• Valoras el ecosistema de módulos de Nuxt para adición rápida de características
• Quieres renderizado híbrido sin configuración compleja de middleware

Elige Next.js cuando:

• Tu equipo es primero React
• Necesitas Componentes del Servidor de React
• Quieres optimizaciones nativas de Vercel

Ambos se implementan limpiamente en Vercel, Netlify y Cloudflare. Somos experimentados con ambos y seremos honestos sobre cuál es el mejor ajuste para tu proyecto específico y equipo.