Client Components

Client Components ermöglichen es Ihnen, interaktive Benutzeroberflächen zu erstellen, die auf dem Client zur Laufzeit gerendert werden können. In Next.js ist das Client-Rendering opt-in, was bedeutet, dass Sie explizit entscheiden müssen, welche Komponenten React auf dem Client rendern soll.

Diese Seite erklärt, wie Client Components funktionieren, wie sie gerendert werden und wann Sie sie verwenden sollten.

Vorteile des Client-Renderings

Das Rendering auf dem Client bietet mehrere Vorteile, darunter:

• Interaktivität: Client Components können State, Effekte und Event-Listener verwenden, was bedeutet, dass sie sofortiges Feedback geben und die Benutzeroberfläche aktualisieren können.
• Browser-APIs: Client Components haben Zugriff auf Browser-APIs wie Geolocation oder localStorage, wodurch Sie spezifische Benutzeroberflächen für bestimmte Anwendungsfälle erstellen können.

Verwendung von Client Components in Next.js

Um Client Components zu verwenden, können Sie die React "use client"-Direktive am Anfang einer Datei, über den Import-Anweisungen, hinzufügen.

"use client" wird verwendet, um eine Grenze zwischen Server- und Client-Component-Modulen zu deklarieren. Das bedeutet, dass durch das Definieren von "use client" in einer Datei alle anderen importierten Module, einschließlich Kindkomponenten, 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>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

'use client'

import { useState } from 'react'

export default function Counter() {
  const [count, setCount] = useState(0)

  return (
    <div>
      <p>You clicked {count} times</p>
      <button onClick={() => setCount(count + 1)}>Click me</button>
    </div>
  )
}

Das folgende Diagramm zeigt verschachtelte Komponenten. Die Verwendung von onClick und useState in toggle.js führt zu einem Fehler, wenn die "use client"-Direktive nicht definiert ist. Das liegt daran, dass Komponenten standardmäßig auf dem Server gerendert werden, wo diese APIs nicht verfügbar sind. Durch das Definieren der "use client"-Direktive in toggle.js können Sie React anweisen, die Komponente und ihre Kinder auf dem Client zu rendern, wo die APIs verfügbar sind.

Mehrere use client-Einstiegspunkte definieren:

Sie können mehrere "use client"-Einstiegspunkte in Ihrem React-Komponentenbaum definieren. Dadurch können Sie Ihre Anwendung in mehrere Client-Bundles (oder Zweige) aufteilen.

Allerdings muss "use client" nicht in jeder Komponente definiert werden, die auf dem Client gerendert werden soll. Sobald die Grenze definiert ist, gelten alle Kindkomponenten und importierten Module als Teil des Client-Bundles.

Wie werden Client Components gerendert?

In Next.js werden Client Components unterschiedlich gerendert, je nachdem, ob die Anfrage Teil eines vollständigen Seitenladens (ein erstes Besuchen Ihrer Anwendung oder ein Seitenneuladen durch einen Browser-Refresh) oder einer nachfolgenden Navigation ist.

Vollständiger Seitenladevorgang

Um das initiale Laden der Seite zu optimieren, verwendet Next.js React-APIs, um eine statische HTML-Vorschau auf dem Server für sowohl Client- als auch Server-Components zu rendern. Das bedeutet, dass Benutzer beim ersten Besuch Ihrer Anwendung den Seiteninhalt sofort sehen, ohne auf das Herunterladen, Parsen und Ausführen des Client-Component-JavaScript-Bundles warten zu müssen.

Auf dem Server:

1. React rendert Server Components in ein spezielles Datenformat namens React Server Component Payload (RSC Payload), das Referenzen auf Client Components enthält.
2. Next.js verwendet den RSC Payload und die JavaScript-Anweisungen der Client Components, 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 erste Vorschau der Route anzuzeigen.
2. Der React Server Components Payload wird verwendet, um die Bäume der Client- und Server-Components abzugleichen und das DOM zu aktualisieren.
3. Die JavaScript-Anweisungen werden verwendet, um Client Components zu hydratisieren und ihre Benutzeroberfläche interaktiv zu machen.

Was ist Hydratisierung?

Hydratisierung ist der Prozess des Anfügens von Event-Listenern an das DOM, um das statische HTML interaktiv zu machen. Im Hintergrund erfolgt die Hydratisierung mit der hydrateRoot-React-API.

Nachfolgende Navigationen

Bei nachfolgenden Navigationen werden Client Components vollständig auf dem Client gerendert, ohne server-seitig gerendertes HTML.

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

Zurück zur Server-Umgebung

Manchmal möchten Sie nach dem Deklarieren der "use client"-Grenze wieder zur Server-Umgebung zurückkehren. Zum Beispiel, um die Größe des Client-Bundles zu reduzieren, Daten auf dem Server abzufragen oder eine API zu verwenden, die nur auf dem Server verfügbar ist.

Sie können Code auf dem Server belassen, obwohl er theoretisch innerhalb von Client Components verschachtelt ist, indem Sie Client- und Server-Components sowie Server Actions miteinander kombinieren. Weitere Informationen finden Sie auf der Seite Kompositionsmuster.