Server- vs. Client-Komponenten in Next.js, wann und wie man sie verwendet

Next.js 13 führte React Server Components ein und gibt Entwicklern die Möglichkeit zu entscheiden, wo und wie Komponenten gerendert werden sollen – entweder auf dem Server für Leistung oder auf dem Client für Interaktivität. Diese Flexibilität ermöglicht es uns, Apps zu erstellen, die Geschwindigkeit und dynamische Funktionen kombinieren.

In diesem Artikel befassen wir uns nicht nur mit den Grundlagen, sondern befassen uns auch mit der Verwendung von Serverkomponenten innerhalb von Clientkomponenten – ein häufiges Bedürfnis beim Erstellen dynamischer, effizienter Apps.

Serverkomponenten verstehen

Serverkomponenten werden vollständig auf dem Server gerendert und erfordern kein clientseitiges JavaScript. Sie eignen sich perfekt für statische Inhalte wie Kopf- und Fußzeilen oder sogar datengesteuerte Komponenten, die keine Benutzerinteraktion erfordern.

Beispiel: Einfache Serverkomponente

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

Diese Komponente wird auf dem Server gerendert und erfordert keine clientseitige Interaktion, was bedeutet, dass sie schneller und mit weniger JavaScript geladen wird.

Vorteile von Serverkomponenten

• Reduzierte JavaScript-Nutzlast: Serverkomponenten reduzieren die Menge an JavaScript, die an den Browser gesendet wird.
• Verbesserter Datenabruf: Serverkomponenten können Daten näher an der Datenbank abrufen und so die Netzwerklatenz reduzieren.

Abrufen von Daten in einer Serverkomponente

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Diese PostList-Komponente ruft Daten auf dem Server ab und sendet den vorgerenderten HTML-Code an den Client, wodurch schnellere Ladezeiten gewährleistet werden.

Wann sollten Client-Komponenten verwendet werden?

Client-Komponenten sind unerlässlich, wenn Sie Interaktivität benötigen, z. B. Formulareingaben, Ereignis-Listener oder dynamische Inhalte. Diese Komponenten verwenden JavaScript auf dem Client, um Benutzerinteraktionen zu verarbeiten.

Beispiel: Client-Komponente für Interaktivität

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

Die Suchleiste ist interaktiv und muss daher eine Client-Komponente sein. Sie können den useState-Hook und andere React-Hooks nur in Client-Komponenten verwenden.

Möglicherweise haben Sie einen Anwendungsfall für die Kombination von Server- und Client-Komponenten. Lassen Sie uns als Nächstes darüber sprechen, wie das geht:

Kombination von Server- und Client-Komponenten

Eine Kernstärke von Next.js 13 ist die Möglichkeit, Server- und Client-Komponenten zu kombinieren. Eine bewährte Methode besteht darin, standardmäßig Serverkomponenten zu verwenden und Clientkomponenten so tief wie möglich in Ihren Komponentenbaum zu verschieben.

Beispiel: Kombination von Server- und Client-Komponenten

// app/layout.js
import SearchBar from './components/SearchBar';

export default function Layout({ children }) {
  return (
    <div>
      <header>My Blog</header>
      <SearchBar />  {/* Client component for interactivity */}
      {children}
    </div>
  );
}

Die SearchBar-Komponente übernimmt die clientseitige Interaktivität, während der Rest des Layouts vom Server gerendert wird und so ein Gleichgewicht zwischen Leistung und Interaktivität bietet.

Umgekehrt haben Sie möglicherweise einen Anwendungsfall für die Verwendung einer Serverkomponente innerhalb einer Clientkomponente. Schauen wir uns an, wie das geht.

So verwenden Sie Serverkomponenten innerhalb von Clientkomponenten

Es ist wichtig zu verstehen, dass Serverkomponenten in Clientkomponenten verschachtelt, aber nicht direkt in diese importiert werden können. Um eine Serverkomponente in eine Clientkomponente einzubinden, übergeben Sie sie als untergeordnete Komponente oder als Requisite, um zu vermeiden, dass die Grenze zwischen den beiden überschritten wird.

Beispiel: Übergabe einer Serverkomponente an eine Clientkomponente

Hier ist ein Beispiel aus der Praxis, bei dem eine Serverkomponente als untergeordnetes Element an eine Clientkomponente übergeben wird:

// app/components/Header.js
export default function Header() {
  return (
    <header>
      <h1>My Static Header</h1>
    </header>
  );
}

Im obigen Beispiel:

• Profil ist eine Serverkomponente, die Daten abruft oder statische Inhalte anzeigt.
• Dashboard ist eine Client-Komponente, die Interaktionen verwaltet (Anzeigen/Ausblenden des Profils).
• Die Profile-Serverkomponente wird als untergeordnete Elemente an die Dashboard-Clientkomponente übergeben.

Mit diesem Muster können Sie die Vorteile des Server-Renderings (weniger JavaScript, verbesserte Leistung) nutzen und gleichzeitig über clientseitige Interaktivität verfügen.

Bibliotheken und Clientkomponenten von Drittanbietern

Viele Bibliotheken von Drittanbietern wie Authentifizierungsanbieter oder UI-Komponenten basieren auf React-Hooks, die nur in Client-Komponenten verwendet werden können. So können Sie diese Einschränkung umgehen, indem Sie Bibliotheken von Drittanbietern in Client-Komponenten einschließen:

Beispiel: Verwendung eines Karussells eines Drittanbieters

// app/components/PostList.js
export default async function PostList() {
  const res = await fetch('https://jsonplaceholder.typicode.com/posts');
  const posts = await res.json();

  return (
    <ul>
      {posts.slice(0, 5).map((post) => (
        <li key={post.id}>{post.title}</li>
      ))}
    </ul>
  );
}

Indem wir das React-Slick-Karussell eines Drittanbieters in eine Client-Komponente einbinden, können wir es auf der vom Server gerenderten Seite verwenden und gleichzeitig auf clientseitige Funktionen wie Interaktivität zugreifen.

Umgang mit Requisiten zwischen Server- und Clientkomponenten

Bei der Weitergabe von Daten zwischen Server- und Client-Komponenten müssen die Requisiten serialisierbar sein (z. B. Zeichenfolgen, Zahlen, Boolesche Werte). Komplexe Objekte wie Funktionen oder Instanzen von Klassen können nicht übergeben werden.

Beispiel: Übergabe von Daten vom Server an den Client

// app/components/SearchBar.js
'use client';  // This makes the component a client component

import { useState } from 'react';

export default function SearchBar() {
  const [searchTerm, setSearchTerm] = useState('');

  return (
    <div>
      <input
        type="text"
        value={searchTerm}
        onChange={(e) => setSearchTerm(e.target.value)}
        placeholder="Search..."
      />
      <p>Searching for: {searchTerm}</p>
    </div>
  );
}

Die UserCard-Client-Komponente kann jetzt die von der Server-Komponente übergebenen Daten dynamisch rendern und gleichzeitig sicherstellen, dass alles serialisierbar bleibt und somit die Server-Client-Grenze ohne Probleme passiert.

Nach alledem wäre es interessant, dies mit Best Practices abzuschließen. Kommen wir als nächstes dazu:

Best Practices für die Zusammensetzung von Server- und Client-Komponenten

Hier sind ein paar Tipps für die effektive Zusammenstellung von Server- und Client-Komponenten:

1. Standardmäßig Serverkomponenten: Verwenden Sie nach Möglichkeit Serverkomponenten für statische oder datengesteuerte Inhalte, um die JavaScript-Last zu reduzieren und die Leistung zu verbessern.

2. Client-Komponenten für Interaktivität verwenden: Verwenden Sie Client-Komponenten nur dort, wo Benutzerinteraktion oder browserspezifische APIs erforderlich sind.

3. Client-Komponenten im Baum nach unten verschieben: Schieben Sie Client-Komponenten so tief wie möglich in den Komponentenbaum. Dadurch kann mehr von Ihrer App auf dem Server gerendert werden, was die Leistung steigert.

4. Serverkomponenten als untergeordnete Komponenten übergeben: Wenn eine Serverkomponente innerhalb einer Clientkomponente verwendet werden muss, übergeben Sie sie als untergeordnete Komponenten oder als Requisite, anstatt sie direkt zu importieren.

Letztes Wort: Die Balance zwischen Leistung und Interaktivität finden

Mit Next.js 13 haben Sie die Flexibilität, Komponenten sowohl auf dem Server als auch auf dem Client zu rendern. Indem Sie standardmäßig Serverkomponenten für statische Inhalte und Clientkomponenten für Interaktivität verwenden und die Grenze zwischen beiden sorgfältig verwalten, können Sie Apps erstellen, die sowohl schnell als auch dynamisch sind.

Wenn Sie den Mustern und Beispielen hier folgen – wie der Übergabe von Serverkomponenten an Clientkomponenten und deren sorgfältiger Kombination – können Sie die volle Leistungsfähigkeit von Next.js 13 nutzen, um hochleistungsfähige, interaktive Webanwendungen zu erstellen.

Viel Spaß beim Codieren
Ich bin Michael.

Das obige ist der detaillierte Inhalt vonServer- vs. Client-Komponenten in Next.js, wann und wie man sie verwendet. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!