Server- und Client-Komponenten

Um zu verstehen, wie Server- und Client-Komponenten funktionieren, ist es hilfreich, zwei grundlegende Web-Konzepte zu kennen:

• Die Umgebungen, in denen Ihr Anwendungscode ausgeführt werden kann: der Server und der Client.
• Die Netzwerkgrenze, die Server- und Client-Code voneinander trennt.

Server- und Client-Umgebungen

Im Kontext von Webanwendungen:

• Der Client bezieht sich auf den Browser auf dem Gerät eines Benutzers, der eine Anfrage an einen Server für Ihren Anwendungscode sendet. Er wandelt dann die Antwort, die er vom Server erhält, in eine Benutzeroberfläche um, mit der der Benutzer interagieren kann.
• Der Server bezieht sich auf den Computer in einem Rechenzentrum, der Ihren Anwendungscode speichert, Anfragen von einem Client empfängt, Berechnungen durchführt und eine entsprechende Antwort zurücksendet.

Jede Umgebung hat ihre eigenen Fähigkeiten und Einschränkungen. Beispielsweise können Sie durch das Verlagern des Renderings und des Datenabrufs auf den Server die Menge an Code reduzieren, die an den Client gesendet wird, was die Leistung Ihrer Anwendung verbessern kann. Aber wie Sie bereits gelernt haben, müssen Sie das DOM auf dem Client aktualisieren, um Ihre Benutzeroberfläche interaktiv zu machen.

Daher ist der Code, den Sie für den Server und den Client schreiben, nicht immer derselbe. Bestimmte Operationen (z. B. Datenabruf oder Verwaltung des Benutzerzustands) sind besser für die eine oder die andere Umgebung geeignet.

Netzwerkgrenze

Die Netzwerkgrenze ist eine konzeptionelle Linie, die die verschiedenen Umgebungen voneinander trennt.

In React können Sie entscheiden, wo Sie die Netzwerkgrenze in Ihrer Komponentenstruktur platzieren möchten. Beispielsweise können Sie die Daten abrufen und die Beiträge eines Benutzers auf dem Server rendern (mit Server-Komponenten) und dann die interaktive LikeButton für jeden Beitrag auf dem Client rendern (mit Client-Komponenten).

Ebenso können Sie eine Nav-Komponente erstellen, die auf dem Server gerendert und seitenübergreifend genutzt wird. Wenn Sie jedoch einen aktiven Zustand für Links anzeigen möchten, können Sie die Liste der Links auf dem Client rendern.

Im Hintergrund werden die Komponenten in zwei Modulgraphen aufgeteilt. Der Server-Modulgraph (oder -baum) enthält alle Server-Komponenten, die auf dem Server gerendert werden, und der Client-Modulgraph (oder -baum) enthält alle Client-Komponenten.

Nachdem die Server-Komponenten gerendert wurden, wird ein spezielles Datenformat namens React Server Component Payload (RSC) an den Client gesendet. Der RSC-Payload enthält:

1. Das gerenderte Ergebnis der Server-Komponenten.
2. Platzhalter (oder "Löcher") für die Stellen, an denen Client-Komponenten gerendert werden sollen, sowie Referenzen zu ihren JavaScript-Dateien.

React verwendet diese Informationen, um die Server- und Client-Komponenten zu konsolidieren und das DOM auf dem Client zu aktualisieren.

Sehen wir uns an, wie das funktioniert.

Verwendung von Client-Komponenten

Wie Sie im letzten Kapitel gelernt haben, verwendet Next.js standardmäßig Server-Komponenten – dies dient der Verbesserung der Leistung Ihrer Anwendung und bedeutet, dass Sie keine zusätzlichen Schritte unternehmen müssen, um sie zu verwenden.

Wenn Sie sich den Fehler in Ihrem Browser ansehen, warnt Next.js Sie, dass Sie versuchen, useState innerhalb einer Server-Komponente zu verwenden. Sie können dies beheben, indem Sie die interaktive "Like"-Schaltfläche in eine Client-Komponente verschieben.

Erstellen Sie eine neue Datei namens like-button.js im Ordner app, die eine LikeButton-Komponente exportiert:

export default function LikeButton() {}

Verschieben Sie das <button>-Element und die handleClick()-Funktion aus page.js in Ihre neue LikeButton-Komponente:

export default function LikeButton() {
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

Verschieben Sie als Nächstes den likes-State und den Import:

import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

Um die LikeButton zu einer Client-Komponente zu machen, fügen Sie die React-Direktive 'use client' am Anfang der Datei hinzu. Dies weist React an, die Komponente auf dem Client zu rendern.

'use client';
 
import { useState } from 'react';
 
export default function LikeButton() {
  const [likes, setLikes] = useState(0);
 
  function handleClick() {
    setLikes(likes + 1);
  }
 
  return <button onClick={handleClick}>Like ({likes})</button>;
}

Importieren Sie in Ihrer page.js-Datei die LikeButton-Komponente in Ihre Seite:

import LikeButton from './like-button';
 
function Header({ title }) {
  return <h1>{title ? title : 'Default title'}</h1>;
}
 
export default function HomePage() {
  const names = ['Ada Lovelace', 'Grace Hopper', 'Margaret Hamilton'];
 
  return (
    <div>
      <Header title="Develop. Preview. Ship." />
      <ul>
        {names.map((name) => (
          <li key={name}>{name}</li>
        ))}
      </ul>
      <LikeButton />
    </div>
  );
}

Speichern Sie beide Dateien und betrachten Sie Ihre Anwendung im Browser. Da es jetzt keine Fehler mehr gibt, sollten Sie feststellen, dass der Browser automatisch aktualisiert wird, sobald Sie Änderungen vornehmen und speichern.

Diese Funktion heißt Fast Refresh. Sie erhalten sofortiges Feedback auf alle Änderungen, die Sie vornehmen, und sie ist mit Next.js vorkonfiguriert.

Zusammenfassung

Zusammenfassend haben Sie etwas über die Server- und Client-Umgebungen und deren Verwendung gelernt. Sie haben auch erfahren, dass Next.js standardmäßig React Server-Komponenten verwendet, um die Leistung zu verbessern, und wie Sie Client-Komponenten für kleinere, interaktive Teile Ihrer Benutzeroberfläche verwenden können.

Weiterführende Literatur

Es gibt noch viel mehr über Server- und Client-Komponenten zu lernen. Hier sind einige zusätzliche Ressourcen:

• Dokumentation zu Server-Komponenten
• Dokumentation zu Client-Komponenten
• Kompositionsmuster
• Die "use client"-Direktive
• Die "use server"-Direktive