Mejores prácticas de rendimiento

Resumen condensado de las 25 mejores prácticas más importantes extraídas de todas las páginas de esta sección.

1. Analiza con @next/bundle-analyzer: Haz que el tamaño del bundle sea visible ejecutando el analizador en CI y en compilaciones locales con ANALYZE=true; recuerda que el mapa de árbol muestra bytes sin comprimir, así que verifica el tamaño de transferencia gzip/brotli en el panel de Red antes de celebrar victorias.
2. Prohibe re-exportaciones de Barrel Files: Los archivos index.ts con export * silenciosamente anulan tree-shaking incluso en módulos ES a menos que establescas "sideEffects": false en package.json; prefiere importaciones profundas o marca paquetes sin efectos secundarios para que el bundler pueda podar código no utilizado.
3. Mide CWV en Producción: Las Core Web Vitals en modo desarrollo son dos a cinco veces peor que en producción debido a código sin minificar, advertencias de React en desarrollo y source maps - siempre compara los objetivos (LCP < 2.5s, INP < 200ms, CLS < 0.1) con una compilación de producción.
4. CLS se acumula a lo largo de la sesión: CLS es acumulativo en toda la sesión del usuario, así que modales, tostadas y banners de consentimiento que aparecen 30 segundos después aún cuentan - reserva espacio para UI diferida y prueba cambios de layout después del primer renderizado, no solo durante la carga.
5. Paraleliza con Suspense de hermanos: Cada límite de Suspense con su propio Server Component asincrónico obtiene datos en paralelo automáticamente, así que dividir hermanos en límites separados te da paralelismo sin escribir Promise.all - un límite de nivel superior lo colapsa de nuevo en una cascada.
6. Elimina N+1 con include/select de Prisma: Iterar una lista con .map(async row => prisma.x.findUnique(...)) emite una consulta por fila; colapsa a un único JOIN mediante include/select y prefiere Promise.allSettled cuando un rechazo parcial no debería descartar todos los demás resultados.
7. Proporciona siempre sizes con next/image: Sin sizes, el navegador asume 100vw y descarga la variante srcset más grande (a menudo 3840px) para una miniatura; pasa una cadena consciente de puntos de quiebre que coincida con tu layout y añade priority solo a la imagen de LCP para que el ancho de banda se gaste donde importa.
8. Auto-aloja fuentes con next/font: Reemplaza las etiquetas <link> de Google Fonts con next/font/google (o next/font/local) para que las fuentes se envíen desde el mismo origen con encabezados de caché inmutable y métricas de fallback generadas automáticamente que eliminen FOUT y CLS; las fuentes variables ahorran alrededor de 100 KB en comparación con cargar múltiples archivos de peso.
9. Memoiza después de perfilar: Recurre a useMemo, useCallback y React.memo solo después de que el profiler muestre un costo real; memoizar prematuramente componentes económicos añade sobrecarga de comparación que frecuentemente supera el trabajo que ahorra.
10. memo es inútil con children: Un componente que recibe children (u un prop de objeto/función en línea) reconstruye ese valor en cada renderizado del padre, así que React.memo nunca ataja - ya sea eleva los children, usa el patrón de wrapper de estado children, o acepta que memo no ayudará allí.
11. Limpia cada asignación de efecto: Cualquier useEffect que inicie una búsqueda, añada un listener, establezca un temporizador, abra un WebSocket o inicialice una biblioteca de gráficos debe devolver una limpieza; el double-mount del Modo Estricto expone la limpieza que falta en lugar de causarla, e intervals/listeners filtrados retienen todo el estado del componente a través del cierre.
12. Cancela búsquedas con AbortController: Conecta cada búsqueda iniciada por efecto a un AbortController y llama a abort() en la limpieza, así que cambios de dependencia o desmontajes no dejan respuestas obsoletas sobrescribiendo estado más nuevo o bloqueando GC de grandes payloads JSON.
13. Conoce las cuatro capas de caché: Next.js tiene Request Memoization (por renderizado), Data Cache (cross-request fetch), Full Route Cache (HTML prerenderizado) y Router Cache (en memoria del cliente); cualquier llamada cookies()/headers() o cache: "no-store" desactiva Full Route Cache para toda la ruta, así que aísla ese código en su propio hijo Suspense.
14. Cachea llamadas de BD con unstable_cache: Data Cache solo envuelve la API Fetch, así que llamadas de Prisma/Drizzle lo evitan - envuélvelas en unstable_cache(fn, keyParts, { tags, revalidate }) con partes clave únicas y descriptivas, y recuerda que revalidatePath("/x") no toca rutas secundarias a menos que pases "layout".
15. Ejecuta Lighthouse con la mediana: Las ejecuciones individuales de Lighthouse varían 10-15 puntos en infra CI compartida, así que ejecuta al menos tres veces (numberOfRuns: 3) y compara la mediana; establece umbrales de CI más bajos que tus números de producción locales para evitar fallos inestables.
16. Perfila solo compilaciones de producción: El Profiler de React DevTools en desarrollo es 2-5 veces más lento que en producción por advertencias de solo desarrollo y rutas de reconciliador; compila con NODE_ENV=production, usa react-dom/profiling, cierra la pestaña Components durante la grabación, y compara actualDuration vs baseDuration para ver si la memoización realmente está pagando.
17. Coloca estado y usa el patrón de children: Mueve el estado al componente más pequeño que realmente lo usa y pasa el subárbol estático como children a un wrapper que posea el estado; los children se crean en el ámbito del padre, así que el wrapper con estado puede re-renderizarse sin re-renderizar el árbol estático - no se necesita memo.
18. Divide contextos por preocupación: Un único contexto que transporta tanto estado como dispatch re-renderiza cada consumidor en cualquier cambio; divide en contextos separados (estado vs acciones) o usa Zustand/useSyncExternalStore para que los suscriptores de grano fino solo se re-rendericen cuando su slice específico cambie.
19. Permite que el compilador de React memoice: Habilitar experimental.reactCompiler: true (más babel-plugin-react-compiler) inserta memoización más granular que useMemo/useCallback/memo escritos a mano - adopta el compilador antes de arrancar memoización manual para que nunca dejes una brecha donde nada esté memoizado.
20. Mantén el renderizado puro para el compilador: El compilador asume que el renderizado es determinístico y libre de efectos secundarios, así que logging, Date.now()/Math.random() durante el renderizado o lecturas desde globales mutables o dejan de dispararse o cachean valores obsoletos - usa useSyncExternalStore para fuentes externas mutables.
21. Envía "use client" a las hojas: Añadir "use client" en un layout contamina todo el subárbol y añade 100+ KB de JS de hidratación; mantén la directiva en la hoja interactiva más pequeña y pasa Server Components a través de children en wrappers de Client Component como <ThemeProvider>.
22. Pasa props serializables a través del límite: Dates, Maps, Sets, instancias de clase y callbacks no pueden cruzar el límite Server→Client limpiamente - convierte dates a cadenas ISO y reemplaza callbacks con Server Actions; tampoco nunca importes fs, prisma u otros módulos solo de servidor dentro de un archivo "use client".
23. Selecciona con useShallow en Zustand: useStore(s => s) se suscribe a la tienda completa, y useStore(s => ({ a: s.a, b: s.b })) crea un objeto fresco en cada actualización causando re-renderizados espurios; envuelve en useShallow desde zustand/react/shallow para comparar propiedades en lugar de identidad.
24. Trasmite con Suspense granular: Coloca un límite de Suspense por sección lógica de UI con un skeleton que coincida con las dimensiones del contenido final (para mantener CLS en cero), y empareja cada límite con un límite de error para que una sección fallida no bloquee la página completa - evita tantos límites pequeños que la UI "aparezca" incoherentemente.
25. Cumple presupuestos de bundle en CI: Añade presupuestos de tamaño de bundle a la compilación (Webpack performance.hints: "error", size-limit o la salida analyze de Next.js comparada con main) para que las regresiones causen fallo en la compilación en lugar de enviarse silenciosamente; empareja eso con una verificación de Lighthouse CI para que tanto bytes como métricas percibidas por el usuario cierren fusiones.