Next.js ist ein robustes Framework, mit dem Entwickler schnell serverseitig gerenderte React-Anwendungen erstellen können. Es hat verschiedene wesentliche Funktionen. Eines seiner Hauptmerkmale ist seine Fähigkeit, Daten einfach abzurufen und sie den Komponenten leicht zur Verfügung zu stellen.

Das Abrufen von Daten ist eine wesentliche Funktion, die es Entwicklern ermöglicht, Daten auf einer Website/Webanwendung abzurufen und anzuzeigen. Es gibt verschiedene Möglichkeiten, Daten in Next.js abzurufen, jede mit ihren Vorteilen und Anwendungsfällen. In diesem Artikel werden verschiedene Möglichkeiten zum Abrufen von Daten in Next.js untersucht.

Verwendung des useEffect-Hooks zum Abrufen von Daten

Der useEffect Haken ist ein Reaktionshaken, der verwendet wird, um Nebenwirkungen auszuführen, wie API-Aufrufe in Komponenten. Sie können den useEffect-Hook verwenden, um Daten in Next.js abzurufen.

Dieser Hook ist hilfreich für Seiten, die dynamische Daten benötigen, wie z. B. Benutzerprofilseiten, die Informationen speziell für den angemeldeten Benutzer anzeigen.

Um den useEffect-Hook zu verwenden, importieren Sie ihn zuerst in die Komponente Ihrer Wahl, rufen die Daten ab und rendern Ihre Seite damit.

Zum Beispiel:

importieren { useEffect, useState } aus'reagieren';
ExportStandardFunktionHeim() {
konst [Daten, setData] = useState("");
 useEffect(() => {
 bringen(' https://api.example.com/data');
 .Dann( (Antwort) => Antwort.json() )
 .Dann( (Daten) => setData (Daten) )
 }, []); 
zurückkehren (


 {Daten.Name}
 </div>
 )
}

Dieser Codeblock verwendet den useEffect-Hook, um Daten von einer API abzurufen. If übergibt zwei Parameter an den useEffect-Hook: eine Funktion zum Abrufen der Daten und ein Abhängigkeitsarray. Bei Erfolg verwendet es setData() um den Status der Komponente mit den Daten zu aktualisieren, die die Abrufanforderung zurückgibt.

Das Abhängigkeitsarray, das Sie an den useEffect-Hook übergeben, sollte den Wert enthalten, von dem der Effekt abhängt. Die Komponente führt den Effekt nur dann erneut aus, wenn sich der Wert im Abhängigkeitsarray ändert. Wenn das Abhängigkeitsarray leer ist – wie in diesem Beispiel – wird der Effekt nur beim ersten Rendern ausgeführt.

Handhabung der automatischen Revalidierung mit SWR

Der SWR (stale-while-revalidate)-Bibliothek ist eine React-Hook-Bibliothek zur Handhabung des Datenabrufs. Du musst die SWR-Bibliothek einrichten zuerst, um es in Ihrer Next-Anwendung zu verwenden.

Eines der Hauptmerkmale der SWR-Bibliothek ist ihre Fähigkeit, die Datenrevalidierung zu automatisieren. Diese Funktion ist unerlässlich, wenn Daten häufig aktualisiert werden und ständig auf dem neuesten Stand sein müssen. Diese Funktionalität stellt sicher, dass Ihre Anwendung immer Zugriff auf die aktuellsten Daten hat, wodurch sie dynamischer und reaktionsschneller für Ihre Benutzer wird.

Die SWR-Bibliothek stellt eine neue Abrufanforderung an eine API, wenn ein Benutzer sich wieder auf eine Seite konzentriert oder zwischen Registerkarten wechselt. Wenn ein Benutzer eine Seite verlässt, werden die auf dem Bildschirm angezeigten Daten veraltet. Wenn sie auf die Seite zurückkehren, sendet die SWR-Bibliothek eine neue Abrufanforderung an die API und vergleicht die neuen Daten mit den veralteten Daten, um festzustellen, ob sie sich geändert haben.

Um die SWR-Bibliothek daran zu hindern, diese Aktion auszuführen, können Sie die verwenden erneut validierenOnFocus Möglichkeit.

So:

konst { Daten, Fehler, wird geladen } = useSWR (' https://api.example.com/data', Abholer, {
 revalidierenOnFocus: FALSCH,
})

Wenn Sie die Eigenschaft „revalidateOnFocus“ auf „false“ setzen, wird sichergestellt, dass die SWR-Bibliothek Ihre Daten nicht jedes Mal neu validiert, wenn Sie die Seite erneut fokussieren.

Die SWR-Bibliothek überprüft die Daten auch erneut, wenn sich ein Benutzer wieder mit dem Internet verbindet. Diese Aktion kann in bestimmten Situationen sehr hilfreich sein und funktioniert automatisch.

Um die Aktion zu deaktivieren, können Sie die verwenden revalidateOnReconnect Möglichkeit:

konst { Daten, Fehler, wird geladen } = useSWR (' https://api.example.com/data', Abholer, {
 revalidateOnReconnect: FALSCH,
})

Um die automatische Revalidierung Ihrer Daten zu deaktivieren, setzen Sie die beiden Eigenschaften revalidateOnFocus und revalidateOnRecconect auf false.

Verwenden der Isomorphic-Unfetch-Bibliothek zum Durchführen von Abrufanforderungen

Der isomorph-unfetch Bibliothek ist eine kleine, leichtgewichtige Bibliothek, die Abrufanforderungen in einer Next.js-Anwendung ausführen kann. Die Bibliothek ist eine hervorragende Alternative zum nativen bringen API. Es ist einfach zu verwenden, was es perfekt für Entwickler macht, die neu in der Erstellung von Abrufanforderungen sind.

Sie können isomorphic-unfetch als Polyfill für ältere Browser verwenden, die die native Fetch-API nicht unterstützen. Die isomorphic-unfetch-Bibliothek ist minimalistisch und für die Arbeit an kleinen Anwendungen geeignet.

Um isomorphic-unfetch in einer Next.js-Anwendung zu verwenden, installieren Sie die Bibliothek, indem Sie den folgenden Befehl ausführen:

npm install isomorphic-unfetch

Anschließend können Sie die Bibliothek importieren und in Ihrer Komponente verwenden, um Daten wie folgt abzurufen:

importieren Bringen aus'isomorphic-unfetch'
importieren {useState, useEffect} aus'reagieren'
ExportStandardFunktionHeim() {
konst [Daten, setData] = useState(Null)
 useEffect(() => {
 Bringen(' https://api.example.com/data')
 .Dann( (Antwort) => Antwort.json)
 .Dann( (Daten) => setData (Daten) )
 }, [])

Wenn (!Daten) zurückkehren<div>Wird geladen...div>
zurückkehren (


{Daten.Name}</h1>
 </div>
 )
}

Die isomorphe Unfetch-Funktion funktioniert sowohl auf der Clientseite als auch auf der Serverseite.

Effizienter Datenabruf mit Next.js

Das Abrufen von Daten ist ein wichtiges Feature bei der Entwicklung von Anwendungen. Next.js bietet mehrere Möglichkeiten zum Abrufen von Daten, von denen jede ihre Vorteile und Kompromisse hat.

Wenn Sie sich für eine Methode entscheiden, berücksichtigen Sie die Kompromisse und stellen Sie sicher, dass Sie eine Technik verwenden, mit der Sie vertraut sind.