Client Components

Client Components ermöglichen es Ihnen, interaktive Benutzeroberflächen zu erstellen, die auf dem Server vorgerendert werden und Client-JavaScript im Browser verwenden können.

Diese Seite erklärt, wie Client Components funktionieren, wie sie gerendert werden und wann Sie sie einsetzen 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.

Verwendung von Client Components in Next.js

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

"use client" wird verwendet, um eine Grenze zwischen Server- und Client-Component-Modulen zu deklarieren. Das bedeutet, dass durch die Definition 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, dass die Verwendung von onClick und useState in einer verschachtelten Komponente (toggle.js) einen Fehler verursacht, wenn die "use client"-Direktive nicht definiert ist. Standardmäßig sind alle Komponenten im App Router Server Components, in denen diese APIs nicht verfügbar sind. Durch die Definition der "use client"-Direktive in toggle.js können Sie React anweisen, die Client-Grenze zu betreten, wo diese APIs verfügbar sind.

Definition mehrerer use client-Einstiegspunkte:

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

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

Wie werden Client Components gerendert?

In Next.js werden Client Components unterschiedlich gerendert, je nachdem, ob es sich um einen vollständigen Seitenladevorgang (ein erstes Besuchen Ihrer Anwendung oder ein Neuladen der Seite durch einen Browser-Refresh) oder eine nachfolgende Navigation handelt.

Vollständiger Seitenladevorgang

Um den anfänglichen Seitenladevorgang 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 Inhalt der Seite 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 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 Client- und Server-Component-Bäume abzugleichen und das DOM zu aktualisieren.
3. Die JavaScript-Anweisungen werden verwendet, um Client Components zu hydrieren und ihre Benutzeroberfläche interaktiv zu machen.

Was ist Hydration?

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

Nachfolgende Navigationen

Bei nachfolgenden Navigationen werden Client Components vollständig auf dem Client gerendert, ohne servergerendertes HTML.

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

Zurück zur Server-Umgebung

Manchmal möchten Sie nach der Deklaration 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 abzurufen oder eine API zu verwenden, die nur auf dem Server verfügbar ist.

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