Script-Optimierung

Layout-Skripte

Um ein Drittanbieter-Skript für mehrere Routen zu laden, importieren Sie next/script und binden Sie das Skript direkt in Ihre Layout-Komponente ein:

import Script from 'next/script'

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

import Script from 'next/script'

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

Das Drittanbieter-Skript wird abgerufen, wenn der Benutzer auf die Ordnerroute (z.B. dashboard/page.js) oder eine verschachtelte Route (z.B. dashboard/settings/page.js) zugreift. Next.js stellt sicher, dass das Skript nur einmal geladen wird, selbst wenn ein Benutzer zwischen mehreren Routen innerhalb desselben Layouts navigiert.

Anwendungsweite Skripte

Um ein Drittanbieter-Skript für alle Routen zu laden, importieren Sie next/script und binden Sie das Skript direkt in Ihr Root-Layout ein:

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

import Script from 'next/script'

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

Dieses Skript wird geladen und ausgeführt, wenn auf irgendeine Route 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 es ermöglicht, Drittanbieter-Skripte in jeder Seite oder jedem Layout zu laden, können Sie das Ladeverhalten mit der strategy-Eigenschaft feinjustieren:

beforeInteractive: Lädt das Skript vor jeglichem Next.js-Code und vor der Hydratation der Seite.
afterInteractive: (Standard) Lädt das Skript früh, aber nachdem ein Teil der Hydratation 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.

Lesen Sie die next/script-API-Referenzdokumentation, um mehr über jede Strategie und ihre Anwendungsfälle zu erfahren.

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 freigehalten wird.

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

next.config.js

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

Führen Sie dann next aus (normalerweise npm run dev oder yarn dev), und Next.js wird Sie durch die Installation der erforderlichen Pakete zur Fertigstellung des Setups führen:

Terminal

npm run dev

Sie werden Anweisungen wie diese sehen: 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" />
    </>
  )
}

Es gibt eine Reihe von Abwägungen, die beim Laden eines Drittanbieter-Skripts in einem Web Worker berücksichtigt werden müssen. 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 zusätzlichen Codes

Ereignishandler können mit der Script-Komponente verwendet werden, um zusätzlichen Code auszuführen, nachdem ein bestimmtes Ereignis eingetreten ist:

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:

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

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

Lesen Sie die next/script-API-Referenz, um mehr über jeden Ereignishandler zu erfahren und Beispiele zu sehen.

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

Script

Optimieren Sie Drittanbieter-Skripte in Ihrer Next.js-Anwendung mit der integrierten `next/script`-Komponente.