Pages Router: Drittanbieter-JavaScript

Drittanbieter-JavaScript bezieht sich auf Skripte, die von einer externen Quelle hinzugefügt werden. Typischerweise werden Skripte von Drittanbietern eingebunden, um zusätzliche Funktionalitäten in eine Website zu integrieren, die nicht von Grund auf neu geschrieben werden müssen, wie z.B. Analysetools, Werbeanzeigen und Widgets für den Kundensupport.

Hinzufügen von Drittanbieter-JavaScript

Sehen wir uns an, wie wir ein Drittanbieter-Skript zu einer Next.js-Seite hinzufügen können.

Öffnen Sie pages/posts/first-post.js in Ihrem Editor und suchen Sie nach folgenden Zeilen:

<Head>
  <title>First Post</title>
</Head>

Neben Metadaten werden Skripte, die so schnell wie möglich geladen und ausgeführt werden sollen, normalerweise innerhalb des <head> einer Seite eingefügt. Mit einem regulären HTML-<script>-Element würde ein externes Skript wie folgt hinzugefügt werden:

<Head>
  <title>First Post</title>
  <script src="https://connect.facebook.net/en_US/sdk.js" />
</Head>

Dieses Skript enthält das Facebook SDK, das häufig für Facebook-Social-Plugins und andere Funktionen verwendet wird. Obwohl dieser Ansatz funktioniert, gibt das Einbinden von Skripten auf diese Weise keinen klaren Aufschluss darüber, wann es im Verhältnis zu anderen JavaScript-Codes geladen wird, die auf derselben Seite abgerufen werden. Wenn ein bestimmtes Skript das Rendering blockiert und das Laden von Seiteninhalten verzögern kann, kann dies die Leistung erheblich beeinträchtigen.

Verwendung der Script-Komponente

next/script ist eine Erweiterung des HTML-<script>-Elements und optimiert, wann zusätzliche Skripte abgerufen und ausgeführt werden.

Fügen Sie in derselben Datei am Anfang der Datei einen Import für Script aus next/script hinzu:

import Script from 'next/script';

Aktualisieren Sie nun die FirstPost-Komponente, um die Script-Komponente einzubinden:

export default function FirstPost() {
  return (
    <>
      <Head>
        <title>First Post</title>
      </Head>
      <Script
        src="https://connect.facebook.net/en_US/sdk.js"
        strategy="lazyOnload"
        onLoad={() =>
          console.log(`script loaded correctly, window.FB has been populated`)
        }
      />
      <h1>First Post</h1>
      <h2>
        <Link href="/">← Back to home</Link>
      </h2>
    </>
  );
}

Beachten Sie, dass in der Script-Komponente einige zusätzliche Eigenschaften definiert wurden:

strategy steuert, wann das Drittanbieter-Skript geladen werden soll. Der Wert lazyOnload weist Next.js an, dieses spezielle Skript während der Leerlaufzeit des Browsers verzögert zu laden.
onLoad wird verwendet, um JavaScript-Code unmittelbar nach dem Laden des Skripts auszuführen. In diesem Beispiel protokollieren wir eine Nachricht in der Konsole, die angibt, dass das Skript korrekt geladen wurde.

Rufen Sie http://localhost:3000/posts/first-post auf. Mit den Entwicklertools Ihres Browsers sollten Sie die obige Nachricht im Console-Panel sehen. Zusätzlich können Sie window.FB ausführen, um zu sehen, dass das Skript diese globale Variable gefüllt hat.

Hinweis: Das Facebook SDK wurde nur als konstruiertes Beispiel verwendet, um zu zeigen, wie Sie Drittanbieter-Skripte auf performante Weise in Ihre Anwendung einbinden können. Nachdem Sie nun die Grundlagen der Integration von Drittanbieter-Funktionalitäten in Next.js verstanden haben, können Sie die Script-Komponente aus FirstPost entfernen, bevor Sie fortfahren.

Um mehr über die Script-Komponente zu erfahren, lesen Sie die Dokumentation.

Drittanbieter-JavaScript

Hinzufügen von Drittanbieter-JavaScript

Verwendung der Script-Komponente

On this page