Script-Optimierung

Anwendungsweite Skripte

Um ein Drittanbieter-Skript für alle Routen zu laden, importieren Sie next/script und binden Sie das Skript direkt in Ihre benutzerdefinierte _app-Datei ein:

import Script from 'next/script'

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

Dieses Skript wird geladen und ausgeführt, wenn auf irgendeine Route in Ihrer Anwendung zugegriffen wird. Next.js stellt sicher, dass das Skript nur einmal geladen wird, selbst wenn ein Benutzer zwischen mehreren Seiten navigiert.

Empfehlung: Wir empfehlen, Drittanbieter-Skripte nur in bestimmten Seiten oder Layouts einzubinden, um unnötige Auswirkungen auf die Leistung zu minimieren.

Strategie

Obwohl das Standardverhalten von next/script das Laden von Drittanbieter-Skripten auf jeder Seite oder in jedem Layout ermöglicht, können Sie das Ladeverhalten mit der strategy-Eigenschaft feinabstimmen:

• beforeInteractive: Lädt das Skript vor jeglichem Next.js-Code und vor der Hydration der Seite.
• afterInteractive: (Standard) Lädt das Skript früh, aber nachdem ein Teil der Hydration der Seite erfolgt ist.
• lazyOnload: Lädt das Skript später während der Leerlaufzeit des Browsers.
• worker: (experimentell) Lädt das Skript in einem Web Worker.

Weitere Informationen zu jeder Strategie und ihren Anwendungsfällen finden Sie in der next/script-API-Referenzdokumentation.

Auslagern von Skripten in einen Web Worker (Experimentell)

Warnung: Die worker-Strategie ist noch nicht stabil und funktioniert noch nicht mit dem app-Verzeichnis. Mit Vorsicht verwenden.

Skripte, die die worker-Strategie verwenden, werden mit Partytown in einen Web Worker ausgelagert und dort ausgeführt. Dies kann die Leistung Ihrer Website verbessern, indem der Hauptthread für den Rest Ihres Anwendungscodes reserviert bleibt.

Diese Strategie ist noch experimentell und kann nur verwendet werden, wenn das nextScriptWorkers-Flag in next.config.js aktiviert ist:

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

Führen Sie dann next aus (normalerweise npm run dev oder yarn dev), und Next.js führt Sie durch die Installation der erforderlichen Pakete, um das Setup abzuschließen:

npm run dev

Sie sehen Anweisungen wie diese: Bitte installieren Sie Partytown durch Ausführen von npm install @builder.io/partytown

Sobald das Setup abgeschlossen ist, wird durch die Definition von strategy="worker" automatisch Partytown in Ihrer Anwendung initialisiert und das Skript in einen Web Worker ausgelagert.

import Script from 'next/script'

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

import Script from 'next/script'

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

Beim Laden eines Drittanbieter-Skripts in einem Web Worker müssen verschiedene Kompromisse berücksichtigt werden. Weitere Informationen finden Sie in der Tradeoffs-Dokumentation von Partytown.

Inline-Skripte

Inline-Skripte, also Skripte, die nicht aus einer externen Datei geladen werden, werden ebenfalls von der Script-Komponente unterstützt. Sie können geschrieben werden, indem der JavaScript-Code in geschweifte Klammern gesetzt wird:

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

Oder durch Verwendung der dangerouslySetInnerHTML-Eigenschaft:

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

Warnung: Für Inline-Skripte muss eine id-Eigenschaft zugewiesen werden, damit Next.js das Skript verfolgen und optimieren kann.

Ausführen von zusätzlichem Code

Ereignishandler können mit der Script-Komponente verwendet werden, um zusätzlichen Code nach einem bestimmten Ereignis auszuführen:

• onLoad: Führt Code aus, nachdem das Skript fertig geladen wurde.
• onReady: Führt Code aus, nachdem das Skript fertig geladen wurde und jedes Mal, wenn die Komponente eingebunden wird.
• onError: Führt Code aus, wenn das Skript nicht geladen werden kann.

Diese Handler funktionieren nur, wenn next/script importiert und in einer Client-Komponente verwendet wird, in der "use client" als erste Codezeile definiert ist:

import Script from 'next/script'

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

import Script from 'next/script'

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

Weitere Informationen zu jedem Ereignishandler und Beispiele finden Sie in der next/script-API-Referenz.

Zusätzliche Attribute

Es gibt viele DOM-Attribute, die einem <script>-Element zugewiesen werden können und die nicht von der Script-Komponente verwendet werden, wie nonce oder benutzerdefinierte Datenattribute. Das Einfügen zusätzlicher Attribute führt automatisch dazu, dass sie an das finale, optimierte <script>-Element weitergeleitet werden, das in das HTML eingebunden wird.

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

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