React y Next.js — Aplicaciones web de alto rendimiento
Usamos React 18 y Next.js 15 (App Router) para la plataforma 4myevents: el sitio web de presentación y el panel del equipo organizador, con eventos, tipos de entrada, asistentes, check-in, agenda e informes. El código es TypeScript estricto, las pruebas son automatizadas y el despliegue no tiene tiempo de inactividad.
Por qué Next.js en nuestros proyectos
Next.js 15 con App Router ofrece un modelo híbrido único: las páginas estáticas (SSG) se sirven al instante desde la CDN, las páginas dinámicas se ejecutan como Server Components que no envían JavaScript innecesario al navegador y las páginas en tiempo real usan Client Components aislados. El resultado es una puntuación Lighthouse de 95+ de serie, sin trucos.
Las imágenes se optimizan automáticamente mediante el componente `<Image>` (WebP/AVIF, srcSet adaptable, carga diferida), las fuentes se insertan en el CSS crítico con `next/font` y los scripts de terceros se cargan con estrategias de prioridad. En conjunto, estas optimizaciones bajan el LCP por debajo de 2,5 segundos en redes 4G reales.
- Server Components para las páginas del sitio de presentación — cero JS en el cliente, rastreo instantáneo
- SSR en streaming con Suspense para pantallas con datos cargados progresivamente
- Incremental Static Regeneration (ISR) para artículos del blog y páginas de contenido — sin recompilar
- Route Groups y Parallel Routes para layouts complejos sin volver a renderizar
TypeScript estricto — sin errores silenciosos
Todos nuestros proyectos usan TypeScript con `strict: true`, `noImplicitAny`, `exactOptionalPropertyTypes` y `noUncheckedIndexedAccess`. Esta configuración bloquea en tiempo de compilación categorías enteras de errores en ejecución: accesos a valores indefinidos, tipos incompletos en respuestas de API, comparaciones erróneas. Un proyecto típico tiene 0 errores de TypeScript en la CI antes de cualquier prueba.
Para la gestión del estado usamos Zustand (ligero, sin código repetitivo) o React Context para el estado local. La obtención de datos se gestiona con TanStack Query (caché automática, invalidación inteligente, stale-while-revalidate). Formularios con React Hook Form + validación de esquemas Zod — validación síncrona y asíncrona sin código duplicado.
- ESLint con reglas propias para patrones prohibidos (any, console.log, cadenas mágicas)
- Prettier con configuración uniforme — ninguna PR rechazada por formato
- Zod para la validación en tiempo de ejecución de los datos de API externas
- Alias de rutas (`@/components/...`) — importaciones limpias sin `../../..`
Pruebas automatizadas y CI/CD
Pruebas unitarias con Vitest (rápido, compatible con la API de Jest), pruebas de componentes con React Testing Library y E2E con Playwright en 3 navegadores (Chromium, Firefox, WebKit). El pipeline de GitHub Actions ejecuta todas las pruebas en cada PR; la fusión se bloquea si alguna falla. Cobertura mínima del 80 % en la lógica de negocio.
- Lighthouse CI — una puntuación <90 bloquea el despliegue en staging
- Analizador de bundle automático — alerta si el bundle crece >5 % respecto a main
- Storybook para los componentes de UI — documentación visual viva
Ventajas y limitaciones
Ventajas
- Lighthouse 95+ desde el primer día, sin ajustes manuales.
- SSR y SSG nativos — HTML completo para Google y los motores de IA.
- TypeScript estricto detecta errores en compilación, no en producción.
- Ecosistema maduro: Vercel, miles de paquetes, una comunidad enorme.
Limitaciones
- La curva de aprendizaje de App Router y Server Components es pronunciada.
- Cambios incompatibles frecuentes entre versiones mayores — requiere mantenimiento.
- Para un sitio estático sencillo, Next.js puede ser excesivo frente a HTML simple.
- Las compilaciones grandes aumentan el tiempo de compilación y el coste de la CI.
Veredicto breve
Elija React y Next.js para sitios y aplicaciones web que deban ser rápidos, indexables y escalables. Para una única landing page estática sin interactividad, basta una herramienta más sencilla.
Tabla de especificaciones
| Capacidad | Límite / umbral | Uso típico | |
|---|---|---|---|
| Renderizado | SSR, SSG, ISR, CSR | Los Server Components limitan las API del navegador | Marketing estático + panel dinámico |
| Rendimiento | LCP < 2,5 s, Lighthouse 95+ | El JS de hidratación crece con la interactividad | Sitios de alto tráfico y críticos para el SEO |
| Escalado | Decenas de miles de usuarios, CDN en el edge | Requiere alojamiento Node o serverless | SaaS, portales, plataformas de gestión de eventos |
| Coste típico | Código abierto, alojamiento desde ~0 € | Funciones serverless facturadas por uso | De proyectos pequeños a empresas |
Next.js frente a alternativas
| Criterio | Next.js | Nuxt / Astro / Vite |
|---|---|---|
| SSR + SSG en un solo framework | Sí, nativo | Parcial (Nuxt sí, Vite no) |
| Ecosistema React | Completo | Vue (Nuxt) o multiframework (Astro) |
| Lo mejor para un sitio puramente estático | Bueno | Astro es más ligero |
Preguntas frecuentes
¿Por qué Next.js y no React simple (Vite)?
React con Vite solo renderiza en el cliente, así que el HTML inicial está vacío — malo para SEO y GEO. Next.js añade SSR y SSG y entrega HTML completo que Google y los motores de IA leen de inmediato.
¿Es Next.js bueno para el SEO?
Sí. SSR/SSG entregan HTML indexable, los metadatos y el JSON-LD se generan en el servidor y los Core Web Vitals están en verde por diseño — todas ellas señales de posicionamiento sólidas.
¿Puedo migrar un sitio existente a Next.js?
Sí, de forma incremental: las páginas se trasladan una a una, conservando las URL y las redirecciones 301 para no perder posiciones en Google.
¿Qué alojamiento necesita Next.js?
Las páginas estáticas funcionan en cualquier CDN. Las funciones dinámicas (SSR, rutas de API) necesitan Node.js o un entorno serverless como Vercel, Netlify o un contenedor Docker.