Zwei Arten von Komponenten

Jede Komponente, die Sie bisher in diesem Abschnitt geschrieben haben, lief an einem Ort, den Sie möglicherweise gar nicht bemerkt haben: auf dem Server. Das ist kein spezieller Modus, den Sie aktiviert haben: Es ist der Standardwert und das allerwichtigste Konzept in Next.js.

Es gibt genau zwei Arten von Komponenten, und jede bietet Ihnen etwas, das die andere nicht bieten kann.

Server Components: der Standard

• Sie laufen einmal auf dem Server, bevor die Seite gesendet wird
• Sie können async sein, sodass sie Daten direkt innerhalb der Komponente mit await abrufen können
• Sie senden kein JavaScript an den Browser: Der Benutzer lädt das Ergebnis herunter, nicht den Code

Der Haken dabei: Zu dem Zeitpunkt, an dem die Seite den Browser erreicht, ist eine Server-Komponente fertig. Sie ist eine Momentaufnahme. Sie kann sich an nichts erinnern, nicht auf einen Klick reagieren oder sich verändern.

Client-Komponenten: Explicit Opt-in

Wenn die Seite reagieren soll, binden Sie eine Datei mit einer einzigen Zeile ganz oben für den Browser ein:

'use client';

Das kennzeichnet die Datei als Client-Komponente, und nur Client-Komponenten dürfen Folgendes verwenden:

• Hooks: useState, useEffect und Ähnliches
• Event-Handler: onClick, onChange, …
• Browser-APIs: window, localStorage

Beachten Sie den Kompromiss. Eine Serverkomponente ist schnell und leise, aber starr. Eine Client-Komponente ist lebendig, aber ihr Code muss heruntergeladen und im Browser ausgeführt werden.

Die Frage, die Sie sich ab jetzt bei jeder Komponente stellen werden, lautet also nicht „Welche gefällt mir besser?“, sondern „Muss dieser bestimmte Teil auf den Benutzer reagieren?“ Wenn die Antwort Nein lautet (und das tut sie meistens), lassen Sie ihn auf dem Server.