Next.js y el botón rebelde: Soluciones que van más allá de Lighthouse

Tienes un botón que tarda en responder al clic en tu aplicación Next.js. Lighthouse no siempre captura estos problemas de interacción en tiempo real.

El truco

// ANTES
<button onClick={() => handleClick()}>Enviar</button>

// DESPUÉS
<button onClick={(event) => handleUserAction(event)}>Enviar</button>

// Código Mejorado
const handleUserAction = (event) => {
  event.preventDefault(); // Mejora la respuesta
  requestAnimationFrame(() => handleClick());
};

Lighthouse mide el rendimiento, pero no siempre la rapidez con la que un botón responde a un clic. Usar event.preventDefault() evita comportamientos predeterminados que pueden ralentizar la respuesta. Luego, requestAnimationFrame() asegura que el navegador ejecute handleClick() en el próximo ciclo de pintura, optimizando la percepción de velocidad.

No todo es Lighthouse; el rendimiento real se siente cuando el usuario interactúa.