Client-Komponenten

Client-Komponenten ermöglichen es Ihnen, interaktive Benutzeroberflächen zu erstellen, die auf dem Server vorgerendert werden und Client-JavaScript verwenden, um im Browser ausgeführt zu werden.

Diese Seite erklärt, wie Client-Komponenten funktionieren, wie sie gerendert werden und wann Sie sie verwenden können.

Vorteile des Client-Renderings

Es gibt einige Vorteile, das Rendering auf dem Client durchzuführen:

• Interaktivität: Client-Komponenten können Status, Effekte und Ereignislistener verwenden, was bedeutet, dass sie sofortiges Feedback an den Benutzer geben und die Benutzeroberfläche aktualisieren können.
• Browser-APIs: Client-Komponenten haben Zugriff auf Browser-APIs wie Geolokalisierung oder localStorage.

Verwendung von Client-Komponenten in Next.js

Um Client-Komponenten zu verwenden, können Sie die React-Direktive "use client" am Anfang einer Datei über Ihren Imports hinzufügen.

"use client" wird verwendet, um eine Grenze zwischen Server- und Client-Komponentenmodulen zu deklarieren. Das bedeutet, dass durch die Definition von "use client" in einer Datei alle anderen in sie importierten Module, einschließlich untergeordneter Komponenten, als Teil des Client-Bundles betrachtet werden.

'use client'
 
import { useState } from 'react'
 
export default function Counter() {
  const [count, setCount] = useState(0)
 
  return (
    <div>
      <p>Sie haben {count} Mal geklickt</p>
      <button onClick={() => setCount(count + 1)}>Klicken Sie mich</button>
    </div>
  )
}

Das folgende Diagramm zeigt, dass die Verwendung von onClick und useState in einer geschachtelten Komponente (toggle.js) einen Fehler verursacht, wenn die "use client"-Direktive nicht definiert ist. Dies liegt daran, dass standardmäßig alle Komponenten im App-Router Server-Komponenten sind, in denen diese APIs nicht verfügbar sind. Durch die Definition der "use client"-Direktive in toggle.js können Sie React mitteilen, die Client-Grenze zu betreten, wo diese APIs verfügbar sind.

Definieren mehrerer use client-Einstiegspunkte:

Sie können mehrere "use client"-Einstiegspunkte in Ihrer React-Komponentenstruktur definieren. Dies ermöglicht es Ihnen, Ihre Anwendung in mehrere Client-Bundles zu unterteilen.

Allerdings muss "use client" nicht in jeder Komponente definiert werden, die auf dem Client gerendert werden soll. Sobald Sie die Grenze definiert haben, werden alle untergeordneten Komponenten und in sie importierten Module als Teil des Client-Bundles betrachtet.

Wie werden Client-Komponenten gerendert?

In Next.js werden Client-Komponenten unterschiedlich gerendert, je nachdem, ob die Anfrage Teil eines vollständigen Seitenladevorgangs (ein erster Besuch Ihrer Anwendung oder ein Seitenneuladen durch eine Browser-Aktualisierung) oder einer nachfolgenden Navigation ist.

Vollständiger Seitenladevorgang

Um den ersten Seitenaufruf zu optimieren, verwendet Next.js die React-APIs, um sowohl für Client- als auch für Server-Komponenten eine statische HTML-Vorschau auf dem Server zu rendern. Das bedeutet, wenn der Benutzer Ihre Anwendung zum ersten Mal besucht, sieht er den Inhalt der Seite sofort, ohne auf das Herunterladen, Parsen und Ausführen des Client-Komponenten-JavaScript-Bundles warten zu müssen.

Auf dem Server:

1. React rendert Server-Komponenten in ein spezielles Datenformat namens React Server Component Payload (RSC Payload), das Verweise auf Client-Komponenten enthält.
2. Next.js verwendet die RSC Payload und Client-Komponenten-JavaScript-Anweisungen, um HTML für die Route auf dem Server zu rendern.

Dann auf dem Client:

1. Das HTML wird verwendet, um sofort eine schnelle, nicht-interaktive Vorschau der Route anzuzeigen.
2. Die React Server Components Payload wird verwendet, um die Client- und Server-Komponentenbäume abzugleichen und das DOM zu aktualisieren.
3. Die JavaScript-Anweisungen werden verwendet, um Client-Komponenten zu hydrieren und ihre Benutzeroberfläche interaktiv zu machen.

Was ist Hydration?

Hydration ist der Prozess des Anhängens von Ereignislistenern an das DOM, um das statische HTML interaktiv zu machen. Im Hintergrund wird Hydration mit der hydrateRoot React-API durchgeführt.

Nachfolgende Navigationen

Bei nachfolgenden Navigationen werden Client-Komponenten vollständig auf dem Client gerendert, ohne das serverseitig gerenderte HTML.

Das bedeutet, der Client-Komponenten-JavaScript-Bundle wird heruntergeladen und geparst. Sobald der Bundle bereit ist, verwendet React die RSC Payload, um die Client- und Server-Komponentenbäume abzugleichen und das DOM zu aktualisieren.

Zurück zur Server-Umgebung

Manchmal möchten Sie nach der Deklaration der "use client"-Grenze möglicherweise zur Server-Umgebung zurückkehren. Beispielsweise könnten Sie die Client-Bundle-Größe reduzieren, Daten auf dem Server abrufen oder eine API verwenden, die nur auf dem Server verfügbar ist.

Sie können Code auf dem Server belassen, auch wenn er theoretisch in Client-Komponenten verschachtelt ist, indem Sie Client- und Server-Komponenten sowie Server-Aktionen mischen. Weitere Informationen finden Sie auf der Seite Kompositionsmuster.