Cómo comprobar el estado de carga de un script externo en Next.js

1. Reconocimiento del problema

En Nextjs, comprobé si el Script se había cargado utilizando onLaod y useState, y surgió un problema.

Por ejemplo, el siguiente es un ejemplo.

"use client";

import Script from "next/script";
import { useState } from "react";

export default function Page() {
  // Comprobar la carga del script con useState
  // Cuando el script se carga, cambiar el estado de scriptLoad en onLoad
  const [scriptLoad, setScriptLoad] = useState(false);
  return (
    <div>
      <Script
        src="https://example.com/sample.js"
        onLoad={() => setScriptLoad(true)}
      />
      {scriptLoad ? <div>¡Carga completada!</div> : <div>¡Cargando!</div>}
    </div>
  );
}

Si lo hacemos así, cuando el componente se monta por primera vez y el script se carga, el estado de scriptLoad cambia correctamente de false a true.

El problema aparece cuando el script se ha cargado una vez y el componente se vuelve a montar.

Básicamente, el componente Script, una vez montado, garantiza que el script solo se cargue una vez aunque el usuario navegue por varias rutas dentro de Nextjs.

Por lo tanto, después de visitar esa página una vez, cuando la vuelves a visitar, el script ya está cargado, de modo que el estado de useState no cambia.

2. Usar onReady en lugar de onLoad

Por más que busqué, no pude encontrar una solución, así que revisé la documentación oficial de Nextjs sobre el componente Script.

El componente Script puede recibir un total de 5 props.

• src : ruta del script

• strategy : ajuste fino del comportamiento de carga. Solo se puede usar en el servidor.

• onLoad : se ejecuta cuando la carga del script ha finalizado

• onReady : se ejecuta cada vez que el componente se monta después de que la carga del script haya finalizado

• onError : se ejecuta si la carga del script falla

Entre ellos, yo usaba onLoad, por lo que el cambio de estado solo se producía cuando el script se cargaba por primera vez.

Simplemente se soluciona cambiando onLoad por onReady.

...
export default function Page() {
...
      <Script
        src="https://example.com/sample.js"
        onReady={() => setScriptLoad(true)}
      />
...

3. Reseñas finales

No sé cuántas horas estuve dándole vueltas solo por esto.

Intenté resolver la duda con IA, pero tanto Claude como ChatGPT solo soltaban tonterías mencionando código de la época de explore, así que fue bastante frustrante.

Fue un día en el que sentí con fuerza que me gustaría tener a alguien al lado que me guiara.