El checklist de producción que revisa lo que olvidaste antes del deploy

Por qué el build pasa en local y falla en producción

Local y producción tienen entornos distintos: variables de entorno diferentes, sin caché de CI, SSR activo, headers de seguridad, CDN. Un deploy exitoso no es solo compilar sin errores — es verificar que la app funciona correctamente en las condiciones reales del servidor.

# Analiza el bundle antes de subir
ng build --stats-json
npx source-map-explorer dist/app/browser/*.js

# O con el CLI de Angular 17+
ng build && npx bundlemon

Bundle: qué revisar antes del deploy

• Tamaño del chunk inicial: El CLI advierte si el bundle inicial supera 500 KB. Si lo supera, revisa qué importas en AppComponent y los módulos raíz. Librerías como moment.js, lodash o rxjs mal importadas son las culpables habituales.
• Tree shaking de librerías: Importa siempre con named imports: import { format } from 'date-fns', nunca import dateFns from 'date-fns'. Los barrel imports (import * as X) anulan el tree shaking.
• Lazy chunks por ruta: Verifica en el output del build que cada ruta lazy genera su propio chunk. Si el tamaño del chunk inicial no baja al añadir lazy routes, algo está siendo importado en el módulo raíz sin querer.
• Dependencias de desarrollo en producción: Comprueba que no hay paquetes de devDependencies colándose en el bundle. source-map-explorer los muestra claramente. Las más frecuentes: jest, @types/*, ts-node.

Variables de entorno: qué nunca debe llegar al cliente

• NEXT_PUBLIC_ / environment.ts exponen datos al navegador: Todo lo que empieza por NEXT_PUBLIC_ (Next.js) o va en environment.ts (Angular) se incrusta en el bundle y es visible para cualquiera que abra el DevTools. API keys, tokens de terceros y secrets no van ahí nunca.
• Secrets van en variables de entorno del servidor: Stripe secret key, SendGrid API key, credenciales de base de datos — solo en el proceso de servidor. Accede a ellas exclusivamente en Server Components, API routes o Edge Functions.
• Verifica el .env en el pipeline de CI: Asegúrate de que las variables de entorno están configuradas en el entorno de CI/CD (Vercel, Railway, GitHub Secrets) y no solo en el .env local. Un deploy que falla en producción por variable undefined es el error más evitable.
• .env nunca en el repositorio: Verifica que .env, .env.local y .env.production están en .gitignore. Un git log --all -- .env confirma que nunca se commitearon. Si alguna vez lo estuvieron, rota las credenciales.

SSR y prerenderizado: los puntos que se rompen

• APIs del navegador en el servidor: localStorage, window, document y navigator no existen en Node.js. Cualquier acceso sin guard lanza un error en SSR. Envuelve con isPlatformBrowser() o accede solo en AfterRenderPhase.
• Rutas dinámicas y prerenderizado: Si usas prerender con rutas que tienen parámetros (:id, :slug), Angular necesita saber qué rutas generar. Configura PrerenderFallback.Server para rutas que no se puedan enumerar en build time.
• Hydration mismatch: Si el HTML del servidor y el del cliente difieren, Angular descarta el HTML del servidor y re-renderiza. Revisa los warnings de hydration en consola. Causa habitual: contenido que depende de Date.now() o Math.random() sin ser idempotente.
• Transferencia de estado HTTP: Usa withHttpTransferCache() para que las peticiones HTTP hechas en el servidor no se repitan en el cliente. Sin esto, el usuario ve el contenido cargado y luego una nueva petición idéntica.

Headers de seguridad que no puedes olvidar

• Content-Security-Policy (CSP): El header más importante y el más difícil de configurar bien. Define qué orígenes pueden cargar scripts, estilos e iframes. Empieza con report-only para detectar violaciones sin bloquear, luego endurece.
• X-Frame-Options: DENY: Evita que tu app se incruste en un iframe de otro dominio (clickjacking). Si no necesitas iframes propios, pon DENY. Si necesitas iframes entre tus propios subdominios, usa SAMEORIGIN.
• Strict-Transport-Security (HSTS): Fuerza HTTPS para todos los visitantes durante el tiempo que indiques (max-age). Incluye includeSubDomains si todos tus subdominios soportan HTTPS. No lo actives hasta que estés seguro de que HTTPS funciona correctamente.
• X-Content-Type-Options: nosniff: Impide que el navegador intente adivinar el Content-Type de una respuesta. Evita ataques de MIME sniffing. Un header de una línea, sin coste, actívalo siempre.

Core Web Vitals: lo que afecta al ranking y la conversión

• LCP (Largest Contentful Paint) — objetivo: < 2.5s: El elemento más grande visible en el viewport: normalmente el hero image o el h1. Asegúrate de que las imágenes críticas tienen fetchpriority='high' y no están bloqueadas por lazy loading.
• CLS (Cumulative Layout Shift) — objetivo: < 0.1: Ocurre cuando elementos se mueven mientras la página carga. Causa más común: imágenes sin dimensiones width/height declaradas, fuentes que causan FOUT, o contenido que se inserta sobre el fold.
• INP (Interaction to Next Paint) — objetivo: < 200ms: Mide la respuesta a interacciones del usuario (clicks, teclado). En Angular, los componentes con detección de cambios pesada o effects síncronos costosos son los culpables habituales.
• Cómo medirlos antes de subir: Lighthouse en Chrome DevTools para una primera medición. PageSpeed Insights con la URL de staging para datos reales. web-vitals npm package para medir en producción con tus propios usuarios.