Comment charger et optimiser les scripts

Scripts de mise en page

Pour charger un script tiers pour plusieurs routes, importez next/script et incluez le script directement dans votre composant de mise en page :

import Script from 'next/script'

export default function DashboardLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <>
      <section>{children}</section>
      <Script src="https://example.com/script.js" />
    </>
  )
}

Le script tiers est récupéré lorsque la route du dossier (par exemple dashboard/page.js) ou toute route imbriquée (par exemple dashboard/settings/page.js) est accédée par l'utilisateur. Next.js s'assurera que le script ne se charge qu'une seule fois, même si un utilisateur navigue entre plusieurs routes dans la même mise en page.

Scripts d'application

Pour charger un script tiers pour toutes les routes, importez next/script et incluez le script directement dans votre mise en page racine :

import Script from 'next/script'

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html lang="en">
      <body>{children}</body>
      <Script src="https://example.com/script.js" />
    </html>
  )
}

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.

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 :

'use client'

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"
      />
    </>
  )
}

Script

Optimisez les scripts tiers dans votre application Next.js en utilisant le composant intégré `next/script`.