Comment charger et optimiser les scripts

Scripts d'application

Pour charger un script tiers pour toutes les routes, importez next/script et incluez le script directement dans votre _app personnalisé :

pages/_app.js

import Script from 'next/script'

export default function MyApp({ Component, pageProps }) {
  return (
    <>
      <Component {...pageProps} />
      <Script src="https://example.com/script.js" />
    </>
  )
}

Ce script se chargera et s'exécutera lorsque n'importe quelle route de votre application est accédée. Next.js s'assurera que le script ne se charge qu'une seule fois, même si un utilisateur navigue entre plusieurs pages.

Recommandation : Nous recommandons d'inclure les scripts tiers uniquement dans des pages ou mises en page spécifiques afin de minimiser l'impact inutile sur les performances.

Stratégie

Bien que le comportement par défaut de next/script vous permette de charger des scripts tiers dans n'importe quelle page ou mise en page, vous pouvez affiner son comportement de chargement en utilisant la propriété strategy :

beforeInteractive : Charge le script avant tout code Next.js et avant toute hydratation de page.
afterInteractive : (par défaut) Charge le script tôt mais après qu'une partie de l'hydratation de la page ait eu lieu.
lazyOnload : Charge le script plus tard pendant les temps d'inactivité du navigateur.
worker : (expérimental) Charge le script dans un web worker.

Consultez la documentation de référence de l'API next/script pour en savoir plus sur chaque stratégie et leurs cas d'utilisation.

Délégation des scripts à un web worker (expérimental)

Avertissement : La stratégie worker n'est pas encore stable et ne fonctionne pas encore avec le routeur App. Utilisez-la avec prudence.

Les scripts qui utilisent la stratégie worker sont délégués et exécutés dans un web worker avec Partytown. Cela peut améliorer les performances de votre site en dédiant le thread principal au reste de votre code d'application.

Cette stratégie est encore expérimentale et ne peut être utilisée que si l'option nextScriptWorkers est activée dans next.config.js :

next.config.js

module.exports = {
  experimental: {
    nextScriptWorkers: true,
  },
}

Ensuite, exécutez next (normalement npm run dev ou yarn dev) et Next.js vous guidera à travers l'installation des packages nécessaires pour terminer la configuration :

Terminal

npm run dev

Vous verrez des instructions comme celles-ci : Veuillez installer Partytown en exécutant npm install @builder.io/partytown

Une fois la configuration terminée, définir strategy="worker" instanciera automatiquement Partytown dans votre application et déléguera le script à un web worker.

import Script from 'next/script'

export default function Home() {
  return (
    <>
      <Script src="https://example.com/script.js" strategy="worker" />
    </>
  )
}

Il y a un certain nombre de compromis à considérer lors du chargement d'un script tiers dans un web worker. Veuillez consulter la documentation sur les compromis de Partytown pour plus d'informations.

Utilisation d'une configuration Partytown personnalisée

Bien que la stratégie worker ne nécessite aucune configuration supplémentaire pour fonctionner, Partytown prend en charge l'utilisation d'un objet de configuration pour modifier certains de ses paramètres, y compris l'activation du mode debug et le transfert d'événements et de déclencheurs.

Si vous souhaitez ajouter des options de configuration supplémentaires, vous pouvez les inclure dans le composant <Head /> utilisé dans un _document.js personnalisé :

_pages/document.jsx

import { Html, Head, Main, NextScript } from 'next/document'

export default function Document() {
  return (
    <Html>
      <Head>
        <script
          data-partytown-config
          dangerouslySetInnerHTML={{
            __html: `
              partytown = {
                lib: "/_next/static/~partytown/",
                debug: true
              };
            `,
          }}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
    </Html>
  )
}

Pour modifier la configuration de Partytown, les conditions suivantes doivent être remplies :

L'attribut data-partytown-config doit être utilisé pour écraser la configuration par défaut utilisée par Next.js
À moins que vous ne décidiez de sauvegarder les fichiers de la bibliothèque Partytown dans un répertoire séparé, la propriété lib: "/_next/static/~partytown/" et sa valeur doivent être incluses dans l'objet de configuration pour informer Partytown où Next.js stocke les fichiers statiques nécessaires.

Remarque : Si vous utilisez un préfixe d'asset et souhaitez modifier la configuration par défaut de Partytown, vous devez l'inclure dans le chemin lib.

Consultez les options de configuration de Partytown pour voir la liste complète des autres propriétés qui peuvent être ajoutées.

Scripts inline

Les scripts inline, ou scripts non chargés à partir d'un fichier externe, sont également pris en charge par le composant Script. Ils peuvent être écrits en plaçant le JavaScript entre accolades :

<Script id="show-banner">
  {`document.getElementById('banner').classList.remove('hidden')`}
</Script>

Ou en utilisant la propriété dangerouslySetInnerHTML :

<Script
  id="show-banner"
  dangerouslySetInnerHTML={{
    __html: `document.getElementById('banner').classList.remove('hidden')`,
  }}
/>

Avertissement : Une propriété id doit être attribuée pour les scripts inline afin que Next.js puisse suivre et optimiser le script.

Exécution de code supplémentaire

Des gestionnaires d'événements peuvent être utilisés avec le composant Script pour exécuter du code supplémentaire après qu'un certain événement se produit :

onLoad : Exécute du code après que le script a fini de charger.
onReady : Exécute du code après que le script a fini de charger et à chaque fois que le composant est monté.
onError : Exécute du code si le script échoue à charger.

Ces gestionnaires ne fonctionneront que lorsque next/script est importé et utilisé à l'intérieur d'un composant Client où "use client" est défini comme première ligne de code :

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        onLoad={() => {
          console.log('Script has loaded')
        }}
      />
    </>
  )
}

Consultez la référence de l'API next/script pour en savoir plus sur chaque gestionnaire d'événements et voir des exemples.

Attributs supplémentaires

Il existe de nombreux attributs DOM qui peuvent être assignés à un élément <script> et qui ne sont pas utilisés par le composant Script, comme nonce ou les attributs de données personnalisés. L'inclusion de tout attribut supplémentaire le transmettra automatiquement à l'élément <script> final et optimisé qui est inclus dans le HTML.

import Script from 'next/script'

export default function Page() {
  return (
    <>
      <Script
        src="https://example.com/script.js"
        id="example-script"
        nonce="XUENAJFW"
        data-test="script"
      />
    </>
  )
}