Next.js 中的客戶端與伺服器元件-js教程-PHP中文網

Next.js 中的客戶端與伺服器元件

DDD

發布： 2024-09-13 06:23:35

原創

532 人瀏覽過

Client vs Server Components in Next.js

In dieser Version von Next.js werden wir untersuchen, was Client- und Serverkomponenten sind, welche Unterschiede sie haben, wann sie jeweils verwendet werden sollten, und praktische Beispiele bereitstellen, die Sie bei der Implementierung in Ihrem Unternehmen unterstützen Projekte.

Was sind Client- und Serverkomponenten in Next.js?

In Next.js gibt es eine klare Unterscheidung zwischen Client-Komponenten und Server-Komponenten. Durch diese Trennung können Sie bessere Entscheidungen darüber treffen, wo und wie Code verarbeitet werden soll, was sich direkt auf die Leistung und das Benutzererlebnis auswirkt.

Client-Komponenten

Client-Komponenten werden im Browser ausgeführt und ermöglichen Interaktivität und Zugriff auf Browser-APIs wie Fenster oder Dokumente. Sie eignen sich ideal zum Verwalten der dynamischen Schnittstelle Ihrer Anwendung und zum Reagieren auf Benutzeraktionen.

Hauptmerkmale:

Im Browser (Client) ausführen.
Sie haben Zugriff auf Hooks wie useState oder useEffect.
Wird zur Verarbeitung dynamischer Interaktionen wie Formulare oder Schaltflächen verwendet.
Unverzichtbar, wenn Sie schnell auf Benutzeraktionen reagieren müssen.

Beispiel einer Client-Komponente:

'use client'; // Indicates that this component runs on the client

import { useState } from 'react';

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

  return (
    <div>
      <h1>Client-side Counter</h1>
      <p>The count value is: {count}</p>
      <button onClick={() => setCount(count + 1)}>Increment</button>
    </div>
  );
}

登入後複製

Dieses klassische Beispiel ist ein Zähler, der es dem Benutzer ermöglicht, direkt mit der Seite zu interagieren. Der „Use-Client“; Die Direktive teilt Next.js mit, dass diese Komponente im Browser ausgeführt werden soll.

Serverkomponenten

Serverkomponenten sind eine neue Funktion in der Next.js-Architektur. Diese Komponenten werden auf dem Server verarbeitet und senden den bereits gerenderten HTML-Code an den Browser. Dies reduziert die Menge an JavaScript, die den Client erreicht, und beschleunigt das anfängliche Laden der Seite.

Hauptmerkmale:

Auf dem Server gerendert.
Sie haben keinen Zugriff auf Browser-APIs wie „window“ oder „document“ und auch nicht auf React-Hooks wie „useState“.
Kann direkt mit Datenbanken oder externen APIs interagieren.
Optimieren Sie die Leistung, indem Sie HTML anstelle von JavaScript an den Client senden.

Beispiel einer Serverkomponente:

export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/data').then(res => res.json());

  return (
    <div>
      <h1>Data from the Server</h1>
      <p>{data.message}</p>
    </div>
  );
}

登入後複製

In diesem Beispiel wird die Komponente auf dem Server gerendert, ruft Daten von einer API ab und gibt dann den gerenderten HTML-Code zurück. Dies bedeutet, dass die Datenabruflogik den Client nicht erreicht, was die Leistung verbessert.

Neue Funktionen in Next.js

Next.js verfeinert die Interaktion von Server- und Client-Komponenten. Hier sind einige der bemerkenswertesten Verbesserungen:

1. Serverkomponenten standardmäßig

Komponenten sind jetzt standardmäßig Serverkomponenten. Das bedeutet, dass Ihre Anwendung automatisch optimiert wird, indem weniger JavaScript an den Browser gesendet wird, es sei denn, Sie benötigen ausdrücklich eine Client-Komponente.

2. Optimiertes Streaming

Streaming ermöglicht das Laden von Komponenten in Teilen. Dies ist bei großen oder datenintensiven Seiten nützlich, da Abschnitte der Seite geladen werden können, sobald sie bereit sind, ohne darauf warten zu müssen, dass alle Inhalte verfügbar sind.

3. Granulare Kontrolle

Next.js erleichtert die Entscheidung, ob eine Komponente auf dem Server oder dem Client ausgeführt wird, und gibt Ihnen mehr Kontrolle darüber, wie Sie Ihre Anwendung optimieren.

4. Verbesserte Flüssigkeitszufuhr

Hydration ist der Prozess, der vom Server gesendetes statisches HTML in eine interaktive Seite auf dem Client umwandelt. Mit Next.js ist die Flüssigkeitszufuhr effizienter und selektiver und erfolgt nur dort, wo es unbedingt notwendig ist.

Wann sollten Client- oder Serverkomponenten verwendet werden?

Verwenden Sie Client-Komponenten, wenn:

Benutzerinteraktivität: Wenn Sie Interaktionen wie Formulare oder Schaltflächen verarbeiten müssen, die in Echtzeit reagieren.
Statusverwaltung: Ideal für die Verwaltung lokaler Status, die sich dynamisch ändern, z. B. ein Warenkorb.
Animationen und visuelle Effekte: Wenn Sie sich auf Animationen oder Effekte verlassen, die basierend auf der Benutzerinteraktion aktualisiert werden.

Verwenden Sie Serverkomponenten, wenn:

Datenbankabfragen: Wenn Sie Daten aus einer Datenbank abrufen müssen, bevor Sie Inhalte anzeigen.
Statischer Inhalt: Ideal, wenn sich der Inhalt nicht häufig ändert und keine Interaktivität erfordert.
SEO-Verbesserung: Vom Server gerenderte Inhalte sind für Suchmaschinen besser zugänglich, was die SEO verbessert.

Beispiel für die Kombination von Client- und Serverkomponenten:

// ServerComponent.tsx
export default async function ServerComponent() {
  const data = await fetch('https://api.example.com/products').then(res => res.json());

  return (
    <div>
      <h1>Product List (Server-rendered)</h1>
      <ul>
        {data.map((product: any) => (
          <li key={product.id}>{product.name}</li>
        ))}
      </ul>
    </div>
  );
}

// ClientComponent.tsx
'use client';

import { useState } from 'react';

export default function ClientComponent() {
  const [search, setSearch] = useState('');

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

登入後複製

In diesem Beispiel rendert der Server die Produktliste und sendet sie an den Client, während die Suchkomponente interaktiv ist und auf der Clientseite verwaltet wird.