Guía de alojamiento de Next.js: renderizado del lado del servidor, generación estática y requisitos de infraestructura

Entender los modos de renderizado de Next.js

Next.js admite tres estrategias principales de renderizado:

• Generación de sitios estáticos (SSG): páginas renderizadas previamente durante la compilación, que se sirven como HTML estático
• Renderización del lado del servidor (SSR): las páginas se renderizan en cada solicitud; requiere un servidor Node.js
• Regeneración estática incremental (ISR): páginas estáticas con revalidación periódica

Opciones de implementación

Opción 1: Vercel (sin configuración)

Vercel ofrece la implementación más fluida. Ejecuta «vercel» y disfruta de almacenamiento en caché en el borde automático, funciones sin servidor para rutas de API, revalidación de ISR, HTTPS automático y una CDN global. Plan gratuito: 100 GB de ancho de banda. Plan Pro: 1 TB de ancho de banda.

Usa Vercel si no quieres tener que gestionar la infraestructura, tu sitio web es principalmente estático o utiliza ISR, y necesitas almacenamiento en caché en el borde y distribución global. Evítalo si tienes una gran carga de trabajo de SSR o tareas en segundo plano complejas.

Opción 2: Alojamiento propio en un VPS

Solo para la exportación estática, compila con `npm run build` y alójalo con Nginx. Para SSR/ISR, ejecuta Next.js como servidor Node.js con la gestión de procesos PM2 y el proxy Nginx .

Requisitos del servidor: 2 GB de RAM como mínimo para sitios web pequeños, entre 4 y 8 GB de RAM para un tráfico moderado (entre 10 000 y 50 000 visitantes diarios) y más de 16 GB de RAM para SSR con mucho tráfico (más de 100 000 visitantes diarios).

Opción 3: Contenedores Docker

Containeriza Next.js para Kubernetes, AWS ECS o Docker Swarm. Activa el modo autónomo en next.config.js para obtener imágenes más pequeñas. Úsalo si ya estás utilizando una plataforma de orquestación de contenedores o si necesitas escalado automático horizontal.

Opción 4: Alojamiento estático con CDN

Para sitios que solo usan SSG, usa Cloudflare o Netlify. Ambos ofrecen planes gratuitos muy completos, distribución CDN global, HTTPS automático y implementaciones de prueba.

Optimizar el rendimiento de Next.js

Optimización de la imagen

El componente «Image» de Next.js requiere una configuración con Vercel (integrada) o una configuración autohospedada con Cloudflare , o bien un cargador personalizado para un CDN externo.

Estrategias de almacenamiento en caché

Almacena en caché las páginas estáticas durante un año con recursos inmutables. Para las páginas ISR, almacénalas en caché en la CDN con un TTL corto y deja que Next.js se encargue de la revalidación. Para las rutas de API, implementa el almacenamiento en caché con Redis.

Comparación de precios

Para un sitio web con 100 000 visitantes al mes:

• Vercel Pro: unos 20 $ al mes (con 1 TB de ancho de banda)
• VPS autohospedado (4 GB de RAM): 24-40 $ al mes, incluyendo servidor, ancho de banda y copias de seguridad
• Servidor dedicado (SSR para mucho tráfico): 100-300 $ al mes, necesario a partir de 500 000 visitantes
• Cloudflare (solo contenido estático): Gratis para la mayoría de los casos de uso

¿Qué opción de alojamiento deberías elegir?

Para la mayoría de los proyectos, empieza con Vercel. El plan gratuito es suficiente para sitios web pequeños, y el plan Pro (20 $ al mes) es una opción competitiva para un tráfico medio. Si buscas una solución de SSR con mucho tráfico y quieres ahorrar, alójalo tú mismo en un servidor dedicado. Los sitios web puramente estáticos funcionan bien en Cloudflare . Para implementaciones empresariales complejas, usa Kubernetes.

¿Necesitas un servidor VPS o dedicado para Next.js? InMotion Hosting incluyen acceso de root para Node.js, gestión de procesos con PM2 y Launch Assist opcional para la configuración de la implementación.