Hay una pregunta que todo CEO debería hacerle a su equipo técnico: ¿nuestra web se renderiza en el servidor o en el navegador? La respuesta determina directamente cuánto tarda en aparecer el contenido en el teléfono del usuario y por lo tanto, cuántos usuarios se van antes de leer una sola línea.
El problema del renderizado en el cliente (CSR)
Una Single Page Application (SPA) clásica con React funciona así: el servidor envía un HTML casi vacío con un archivo JavaScript enorme. El navegador descarga ese JavaScript, lo ejecuta, llama a las APIs, recibe los datos y finalmente renderiza el contenido. En un teléfono de gama media con conexión 4G promedio en Colombia o México, ese proceso puede tomar 4 a 8 segundos.
Google ve lo mismo que el usuario: una página en blanco. Y una página en blanco no rankea.
Qué hace Next.js diferente
Next.js implementa tres estrategias de renderizado que resuelven este problema:
SSR (Server-Side Rendering): el servidor genera el HTML completo con los datos en cada request. El navegador recibe una página lista para mostrar en milisegundos. Ideal para páginas con datos dinámicos (precios en tiempo real, inventario actualizado, perfil del usuario).
SSG (Static Site Generation): el HTML se genera en tiempo de build, una sola vez. El resultado se sirve desde Cloudflare CDN sin que ningún servidor procese nada en tiempo de request. Ideal para páginas de producto, blogs, landing pages contenido que no cambia con cada visita.
ISR (Incremental Static Regeneration): páginas estáticas que se regeneran automáticamente en background cada N segundos. Combina la velocidad del static con la frescura del dinámico. Ideal para catálogos de productos o páginas de precios.
El impacto en SEO y conversión: números reales
Google usa los Core Web Vitals para rankings. El LCP (Largest Contentful Paint) mide cuánto tarda en aparecer el contenido principal. Con CSR puro, el LCP típico es 3.5 - 7 segundos. Con Next.js SSG servido desde Cloudflare, el LCP baja a 0.6 - 1.4 segundos.
Según estudios de Google, por cada segundo de mejora en tiempo de carga en móvil, las conversiones mejoran entre 8% y 12%. Para un ecommerce que genera $50,000 USD/mes, eso es $4,000–$6,000 USD adicionales mensuales solo por la arquitectura de renderizado.
Cómo Ab4cus implementa Next.js
En nuestro stack de web layer, Next.js usa el App Router con React Server Components. Cada página decide su estrategia de renderizado basándose en el tipo de contenido:
- Landing pages y páginas de marketing → SSG + Cloudflare cache
- Dashboard del usuario → SSR con datos del servidor + streaming
- Páginas de producto en ecommerce → ISR con revalidación cada 60 segundos
- Páginas de KYC y formularios regulatorios → SSR con autenticación verificada en servidor
El resultado garantizado en todos nuestros proyectos: Lighthouse Score 90+ en móvil. No como objetivo — como entregable contractual.
→ Ver costo de un proyecto Next.js con Ab4cus
→ Por qué WordPress no puede competir con este approach de performance
0 Comentarios