Implementación: estática frente a SSR
Genere un sitio completamente estático con nuxt generate, implemente una aplicación SSR en un servidor Node o un entorno de ejecución edge y configure el motor nitro de Nuxt.
Implementación: estática frente a SSR es una lección gratuita de Frontend Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Frontend Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Frontend Academy incluye 4 lecciones en total.
Nuxt se ejecuta en cualquier entorno
Nuxt 3 admite cuatro modos de despliegue: Estático (nuxt generate), SSR (servidor Node), Edge (Cloudflare Workers, Vercel Edge) y Híbrido (por ruta).
Despliegue estático
nuxt generate pre-renderiza cada ruta como un archivo HTML. Despliegue la carpeta .output/public en cualquier host estático (Netlify, Vercel, GitHub Pages, S3).
npm run generate
# .output/public/ contains:
# index.html, about/index.html, blog/post-1/index.html, ...
# Deploy:
npx wrangler pages deploy .output/public
# or
rsync -av .output/public/ user@host:/var/www/Generar rutas dinámicas
Para rutas como /blog/[slug], Nuxt necesita conocer todos los slugs. Proporciónelos mediante nitro.prerender.routes en la configuración.
// nuxt.config.ts
export default defineNuxtConfig({
nitro: {
prerender: {
routes: ['/blog/post-1', '/blog/post-2', '/blog/post-3']
}
}
});
// Or auto-discover: Nitro follows links from /, generating any it finds.Despliegue de SSR en Node
nuxt build crea un servidor Nitro. Despliegue la aplicación en cualquier host Node (Render, Railway, Fly.io o su VPS) ejecutando node .output/server/index.mjs.
npm run build
# .output/server/index.mjs is the Nitro server
# .output/public/ contains static assets
node .output/server/index.mjs # starts on PORT (default 3000)Nitro: el servidor universal
El servidor de Nuxt 3 es Nitro: un motor portable que funciona en cualquier entorno de ejecución: Node, Bun, Deno, Cloudflare Workers, Vercel, Netlify y AWS Lambda. Cambie el destino con nitro.preset.
Despliegue en Edge (Cloudflare Workers)
Establezca el preset en cloudflare-pages o cloudflare. La compilación genera un Worker que se ejecuta en el Edge de Cloudflare.
// nuxt.config.ts
export default defineNuxtConfig({
nitro: { preset: 'cloudflare-pages' }
});
// Build, then:
npx wrangler pages deploy ./distDespliegue en Edge (Vercel Edge)
Vercel detecta Nuxt automáticamente y usa el preset adecuado. Para forzar el Edge Runtime: preset: 'vercel-edge'.
Renderizado híbrido
Las distintas rutas pueden renderizarse de forma diferente. Configúrelo con routeRules.
// nuxt.config.ts
export default defineNuxtConfig({
routeRules: {
'/': { prerender: true }, // SSG
'/blog/**': { isr: 60 }, // ISR every 60s
'/dashboard/**': { ssr: false }, // SPA (client-only)
'/admin/**': { ssr: true } // SSR (per-request)
}
});Elegir entre estático y SSR
Estático: el contenido cambia rara vez, ofrece la máxima velocidad y permite un alojamiento CDN económico (blogs, sitios de marketing y documentación). SSR: contenido por usuario, datos dinámicos y resultados de búsqueda (paneles y comercio electrónico). El modo híbrido permite combinarlos por ruta.
Variables de entorno
Use runtimeConfig en nuxt.config.ts. public se expone al cliente; el resto permanece únicamente en el servidor.
export default defineNuxtConfig({
runtimeConfig: {
apiSecret: '', // server-only, set via NUXT_API_SECRET env
public: {
apiBase: 'https://api.example.com' // accessible client-side
}
}
});
// In a component:
const config = useRuntimeConfig();
console.log(config.public.apiBase);Caché de compilación en CI
Almacene en caché .nuxt/ y node_modules/ entre ejecuciones de CI para acelerar las compilaciones. En Vercel/Netlify, esto es automático.
Pruebas de rendimiento
Después del despliegue, ejecute Lighthouse contra la URL desplegada, no contra localhost. Así probará una CDN real, ubicaciones Edge reales y una limitación de CPU real.
Comprobación rápida
¿Qué comando de Nuxt 3 pre-renderiza todas las rutas como HTML estático para desplegarlas en una CDN como Netlify o Cloudflare Pages?
Resumen: despliegue de Nuxt
nuxt generate → estático (despliegue de .output/public). nuxt build → SSR (despliegue con Node). Los presets de Nitro apuntan a Cloudflare, Vercel, Netlify, AWS, etc. routeRules permite el renderizado híbrido (prerender, isr, ssr y spa por ruta). runtimeConfig permite gestionar variables de entorno (public se expone al cliente). Realice las pruebas con Lighthouse contra la URL desplegada.
Preguntas frecuentes
¿La lección «Implementación: estática frente a SSR» es gratis?
Sí — el texto completo de «Implementación: estática frente a SSR» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Frontend Academy, actualiza a CoddyKit PRO. El curso de Frontend Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Implementación: estática frente a SSR»?
Genere un sitio completamente estático con nuxt generate, implemente una aplicación SSR en un servidor Node o un entorno de ejecución edge y configure el motor nitro de Nuxt. Practicas Frontend Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Frontend Academy?
No se requiere experiencia previa. Frontend Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «Implementación: estática frente a SSR»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Frontend Academy?
Sí. Cada lección de Frontend Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Enrutamiento basado en archivos e importaciones automáticas
- useFetch y useAsyncData
- Módulos de Nuxt: imágenes, autenticación e i18n
- Implementación: estática frente a SSR