use client

Die use client-Direktive bezeichnet eine Komponente zum Rendern auf der Clientseite und sollte verwendet werden, wenn interaktive Benutzeroberflächen (UI) erstellt werden, die Client-seitige JavaScript-Fähigkeiten erfordern, wie Zustandsverwaltung, Ereignisbehandlung und Zugriff auf Browser-APIs. Dies ist eine React-Funktion.

Verwendung

Um eine Komponente als Client-Komponente zu kennzeichnen, fügen Sie die use client-Direktive oben in der Datei hinzu, bevor Sie Importe vornehmen:

'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>
  )
}

Verschachtelung von Client-Komponenten in Server-Komponenten

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

1. Server-Komponenten: Verwenden Sie diese für statische Inhalte, Datenabruf und SEO-freundliche Elemente.
2. Client-Komponenten: Verwenden Sie diese für interaktive Elemente, die Zustand, Effekte oder Browser-APIs erfordern.
3. Komponentenkomposition: Verschachteln Sie Client-Komponenten nach Bedarf in Server-Komponenten für eine klare Trennung von Server- und Client-Logik.

In folgendem Beispiel:

• Header ist eine Server-Komponente, die statische Inhalte verarbeitet.
• Counter ist eine Client-Komponente, die Interaktivität auf 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 zur use client-Direktive finden Sie in der React-Dokumentation.