Leser wie Sie helfen, MUO zu unterstützen. Wenn Sie über Links auf unserer Website einen Kauf tätigen, erhalten wir möglicherweise eine Affiliate-Provision.

Rendering ist der Prozess des Konvertierens von React-Code in HTML. Die von Ihnen gewählte Rendering-Methode hängt von den Daten ab, mit denen Sie arbeiten, und davon, wie wichtig Ihnen die Leistung ist.

In Next.js ist das Rendern sehr vielseitig. Sie können Seiten clientseitig oder serverseitig, statisch oder inkrementell rendern.

Sehen Sie sich an, wie diese Methoden funktionieren und wie sie funktionieren.

Serverseitiges Rendern

Beim serverseitigen Rendering (SSR) sendet der Browser beim Besuch einer Webseite eine Anfrage für diese Seite an den Server. Der Server holt sich bei Bedarf die notwendigen Daten aus der Datenbank und sendet sie zusammen mit dem Inhalt der Seite an den Browser. Der Browser zeigt es dann dem Benutzer an.

Der Browser stellt diese Anfrage für jeden Link, auf den der Benutzer klickt, was bedeutet, dass der Server die Anfrage jedes Mal verarbeitet.

instagram viewer

Dies kann die Leistung der Website beeinträchtigen. Das serverseitige Rendern ist jedoch perfekt für Seiten, die dynamische Daten verbrauchen.

Verwenden Sie getServerSideProps, um die Seite jedes Mal neu zu erstellen, wenn ein Benutzer sie anfordert.

ExportStandardFunktionHeim({ Daten }) {
zurückkehren (
<hauptsächlich>
 // VerwendenDaten
</main>
 );
}
ExportasynchronFunktiongetServerSideProps() {
// Daten von externer API abrufen
konst res = erwarten holen('https://.../data')
konst Daten = erwarten res.json()
// Wird als Requisiten an die Seitenkomponente übergeben
zurückkehren { Requisiten: { Daten } }
}

getServerSideProps läuft nur auf dem Server und so läuft es:

  • Wenn ein Benutzer direkt auf die Seite zugreift, wird sie zur Anforderungszeit ausgeführt und die Seite wird mit den zurückgegebenen Requisiten vorgerendert.
  • Wenn ein Benutzer über einen Weiter-Link auf die Seite zugreift, sendet der Browser eine Anfrage an den Server, auf dem er ausgeführt wird.

In der neuen Version können Sie sich für das serverseitige Rendering entscheiden, indem Sie dynamische Datenabrufe in einer Seite oder einem Layout verwenden.

Dynamische Datenabrufe sind fetch()-Anforderungen, die das Caching ausdrücklich deaktivieren, indem sie die Cache-Option auf „no-store“ setzen.

bringen('https://...', { Zwischenspeicher: 'kein Laden' });

Setzen Sie alternativ die Neuvalidierung auf 0:

bringen('https://...', { weiter: { erneut validieren: 0 } });

Diese Funktion befindet sich derzeit in der Betaphase, also denken Sie daran. Weitere Informationen zu dynamischen Datenabrufen finden Sie im Next.js 13 Beta-Dokumentation.

Clientseitiges Rendern

Sie sollten clientseitiges Rendering (CSR) verwenden, wenn Sie Daten häufig aktualisieren müssen oder wenn Sie Ihre Seite nicht vorab rendern möchten. Sie können CSR auf Seitenebene oder Komponentenebene implementieren. Auf Seitenebene ruft Next.js Daten zur Laufzeit ab, und wenn dies auf Komponentenebene erledigt ist, ruft es Daten beim Mounten ab. Aus diesem Grund kann CSR zu einer langsamen Leistung beitragen.

Verwenden Sie die useEffect()-Hook um Seiten auf dem Client wie folgt zu rendern:

importieren { useState, useEffect } aus 'reagieren'
FunktionHeim() {
konst [Daten, setData] = useState(Null)
konst [isLoading, setLoading] = useState(FALSCH)
useEffect(() => {
 setLoading(WAHR)


bringen('/api/get-data')
 .then((res) => res.json())
 .dann((daten) => {
 setData (Daten)
 setLoading(FALSCH)
 })
 }, [])


if (isLoading) zurück <P>Wird geladen...</P>
 if (!data) zurück <P>Keine Daten</P>
zurückkehren (
<div>
 // VerwendenDaten
</div>
 )
}

Sie können auch den SWR-Hook verwenden. Es speichert die Daten zwischen und validiert sie erneut, falls sie veraltet sind.

importieren SWR verwenden aus 'swr'
const fetcher = (...args) => fetch(...args).then((res) => res.json())
FunktionHeim() {
konst { Daten, Fehler } = useSWR('/api/Daten', Abrufer)
 wenn (Fehler) zurück <div>Laden fehlgeschlagen</div>
 if (!data) zurück <div>Wird geladen...</div>
zurückkehren (
<div>
 // VerwendenDaten
</div>
 )
}

In Next.js 13 müssen Sie eine Client-Komponente verwenden, indem Sie die Direktive „use client“ am Anfang der Datei hinzufügen.

"verwendenKlient";
ExportStandard () => {
zurückkehren (
<div>
// Client-Komponente
</div>
 );
};

Der Unterschied zwischen SSR und CSR besteht darin, dass die Daten bei jeder Seitenanforderung auf dem Server in SSR abgerufen werden, während die Daten auf der Clientseite in CSR abgerufen werden.

Static-Site-Generierung

Mit Static-Site-Generierung (SSG), Die Seite ruft Daten ab einmal während der Bauzeit. Statisch generierte Seiten sind sehr schnell und funktionieren gut, da alle Seiten im Voraus erstellt werden. SSG eignet sich daher perfekt für Seiten, die statische Inhalte wie Verkaufsseiten oder Blogs verwenden.

In Next.js müssen Sie die getStaticProps-Funktion in die Seite exportieren, die Sie statisch rendern möchten.

ExportStandardFunktionHeim({ Daten }) {
zurückkehren (
<hauptsächlich>
 // VerwendenDaten
</main>
 );
}
ExportasynchronFunktiongetStaticProps() {
// Daten zur Build-Zeit von externer API abrufen
konst res = erwarten holen('https://.../data') 
konst Daten = erwarten res.json()
// Wird als Requisiten an die Seitenkomponente übergeben
zurückkehren { Requisiten: { Daten } }
}

Sie können die Datenbank auch innerhalb von getStaticProps abfragen.

ExportasynchronFunktiongetStaticProps() {
 // ForderungFunktionZubringenDatenausDatenbank
konst Daten = erwarten getDataFromDB()
zurückkehren { Requisiten: { Daten } }
}

In Next.js 13 ist statisches Rendering die Standardeinstellung, und Inhalte werden abgerufen und zwischengespeichert, es sei denn, Sie setzen die Caching-Option auf „off“.

asynchronFunktionDaten bekommen() {
konst res = erwarten holen('https://.../data');
zurückkehren res.json();
}
ExportStandardasynchronFunktionHeim() {
konst Daten = erwarten Daten bekommen();
zurückkehren (
<hauptsächlich>
 // VerwendenDaten
</main>
 );
}

Lerne mehr über Statisches Rendern in Next.js 13 aus den Dokumenten.

Inkrementell-statische Generierung

Es gibt Zeiten, in denen Sie SSG verwenden möchten, aber auch den Inhalt regelmäßig aktualisieren möchten. Hier hilft die inkrementelle statische Generierung (ISG).

ISG ermöglicht es Ihnen, statische Seiten zu erstellen oder zu aktualisieren, nachdem Sie sie nach dem von Ihnen festgelegten Zeitintervall erstellt haben. Auf diese Weise müssen Sie nicht die gesamte Website neu erstellen, sondern nur die Seiten, die dies benötigen.

ISG behält die Vorteile von SSG mit dem zusätzlichen Vorteil, den Benutzern aktuelle Inhalte bereitzustellen. ISG ist perfekt für die Seiten Ihrer Website, die sich ändernde Daten verbrauchen. Zum Beispiel können Sie Verwenden Sie ISR, um Blogbeiträge zu rendern sodass der Blog aktualisiert bleibt, wenn Sie Beiträge bearbeiten oder neue hinzufügen.

Um ISR zu verwenden, fügen Sie die Revalidate-Prop der getStaticProps-Funktion auf einer Seite hinzu.

ExportasynchronFunktiongetStaticProps() {
konst res = erwarten holen('https://.../data')
konst Daten = erwarten res.json()
zurückkehren {
 Requisiten: {
 Daten,
 },
 erneuern: 60
 }
}

Hier versucht Next.js, die Seite neu zu erstellen, wenn nach 60 Sekunden eine Anfrage eingeht. Die nächste Anfrage führt zu einer Antwort mit der aktualisierten Seite.

Verwenden Sie in Next.js 13 revalidate in fetch wie folgt:

bringen('https://.../data', { weiter: { erneut validieren: 60 } });

Sie können das Zeitintervall so einstellen, wie es für Ihre Daten am besten geeignet ist.

So wählen Sie eine Rendering-Methode aus

Bisher haben Sie die vier Rendering-Methoden in Next.js kennengelernt – CSR, SSR, SSG und ISG. Jede dieser Methoden ist für unterschiedliche Situationen geeignet. CSR ist nützlich für Seiten, die aktuelle Daten benötigen, wo eine starke SEO keine Rolle spielt. SSR eignet sich auch hervorragend für Seiten, die dynamische Daten verbrauchen, ist aber SEO-freundlicher.

SSG eignet sich für Seiten, deren Daten hauptsächlich statisch sind, während ISG am besten für Seiten geeignet ist, die Daten enthalten, die Sie in Intervallen aktualisieren möchten. SSG und ISG sind großartig in Bezug auf Leistung und SEO, da die Daten vorab abgerufen werden und Sie sie zwischenspeichern können.