use client

Die 'use client'-Direktive deklariert einen Einstiegspunkt für Komponenten, die auf der Client-Seite gerendert werden sollen. Sie sollte verwendet werden, wenn interaktive Benutzeroberflächen (UI) erstellt werden, die Client-seitige JavaScript-Funktionen benötigen, wie z.B. State-Management, Event-Handling und Zugriff auf Browser-APIs. Dies ist ein React-Feature.

Gut zu wissen:

Sie müssen die 'use client'-Direktive nicht jeder Datei hinzufügen, die Client-Komponenten enthält. Sie müssen sie nur zu den Dateien hinzufügen, deren Komponenten Sie direkt innerhalb von Server-Komponenten rendern möchten. Die 'use client'-Direktive definiert die Grenze zwischen Client und Server, und die aus solchen Dateien exportierten Komponenten dienen als Einstiegspunkte zum Client.

Verwendung

Um einen Einstiegspunkt für Client-Komponenten zu deklarieren, fügen Sie die 'use client'-Direktive am Anfang der Datei ein, vor allen Imports:

'use client'

import { useState } from 'react'

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

  return (
    <div>
      <p>Count: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  )
}

Bei Verwendung der 'use client'-Direktive müssen die Props der Client-Komponenten serialisierbar sein. Das bedeutet, die Props müssen in einem Format vorliegen, das React serialisieren kann, wenn Daten vom Server zum Client gesendet werden.

'use client'

export default function Counter({
  onClick /* ❌ Funktionen sind nicht serialisierbar */,
}) {
  return (
    <div>
      <button onClick={onClick}>Increment</button>
    </div>
  )
}

Verschachteln von Client-Komponenten in Server-Komponenten

Die Kombination von Server- und Client-Komponenten ermöglicht es Ihnen, Anwendungen zu erstellen, die sowohl performant als auch interaktiv sind:

1. Server-Komponenten: Verwendung für statische Inhalte, Datenabfragen und SEO-freundliche Elemente.
2. Client-Komponenten: Verwendung für interaktive Elemente, die State, Effekte oder Browser-APIs benötigen.
3. Komponentenkomposition: Verschachteln Sie Client-Komponenten nach Bedarf in Server-Komponenten, um eine klare Trennung von Server- und Client-Logik zu erreichen.

Im folgenden Beispiel:

• Header ist eine Server-Komponente, die statische Inhalte handhabt.
• Counter ist eine Client-Komponente, die Interaktivität innerhalb der Seite ermöglicht.

import Header from './header'
import Counter from './counter' // Dies ist eine Client-Komponente

export default function Page() {
  return (
    <div>
      <Header />
      <Counter />
    </div>
  )
}

Referenz

Weitere Informationen zu 'use client' finden Sie in der React-Dokumentation.