Was ist SWR und wie wird es in Next.js verwendet?

SWR (state-while-revalidate) ist eine von Vercel entwickelte Methode zum Abrufen von Daten. Es funktioniert, indem zuerst Daten abgerufen werden, eine Abrufanforderung gesendet wird, um sie erneut zu validieren, und dann die aktualisierten Daten zurückgegeben werden.

SWR ist sehr leistungsfähig, da es nicht nur das Abrufen wiederverwendbarer Daten ermöglicht, sondern auch integriertes Caching, Paginierung und Revalidierung im Fokus hat. Mit SWR zeigt eine Website zwischengespeicherte Inhalte an, während sie im Hintergrund aktuelle Inhalte abruft.

Wie funktioniert SWR?

Normalerweise würden Sie Daten mit Axios oder der Fetch-Methode abrufen. Diese Methoden stellen eine Verbindung mit der Datenressource her, rufen die Daten ab und geben sie zurück und schließen dann die Verbindung. SWR ruft Daten jedoch anders ab. Es funktioniert in drei Schritten:

1. Gibt veraltete Daten aus dem Cache zurück.
2. Sendet die Abrufanforderung, um Daten erneut zu validieren.
3. Gibt aktuelle Daten zurück.

SWR ist kein Ersatz für die Abruf-API. Stattdessen können Sie zwischengespeicherte Inhalte auf Ihrer Website rendern, sobald der Benutzer sie besucht, und diese Inhalte aktualisieren, wenn sie veraltet sind.

Woher weiß SWR also, wann der Cache ungültig ist? Durch eine Cache-Control-Header-Antwort. Die Antwort hat zwei Zustände: frisch und veraltet. Ein frischer Zustand bedeutet, dass der Cache wiederverwendet werden kann, während ein veralteter Zustand bedeutet, dass er ungültig ist. Sie geben die Gültigkeitsdauer der Antwort in der Richtlinie max-age an.

SWR betrachtet jede zwischengespeicherte Antwort, die älter als max-age ist, als ungültig. Nachdem Ihre App die veralteten zwischengespeicherten Daten gerendert hat, validiert SWR sie erneut und gibt neue Daten zurück, mit denen Sie die Seite aktualisieren können.

So rufen Sie Daten in Next.js mit SWR ab

Beginnen Sie mit der Verwendung von SWR in React, indem Sie es zuerst über einen Paketmanager installieren. Dieser Befehl verwendet npm.

npm install swr\n

Importieren Sie in einer Komponentendatei den useSWR-Hook aus swr.

import useSWR from "swr"\n

Der useSWR-Hook akzeptiert zwei Argumente:

1. Eine eindeutige Kennung für die Daten. Normalerweise die API-URL.
2. Eine Abruffunktion. Dies ist die Funktion, die zum Abrufen von Daten verwendet wird. Es kann Fetch, Axios oder andere Tools zum Abrufen von Daten verwenden.

Der Hook gibt die Daten und ein Fehlerobjekt zurück. Stellen Sie sicher, dass Sie diesen Hook gemäß den Best Practices verwenden.

Hier ist ein Beispiel, das zeigt, wie der useSWR-Hook verwendet wird.

const fetcher = (...args) => fetch(...args).then(res => res.json());\nconst {data, error} = useSWR("/api/data", fetcher);\n

Sie können die Daten in einer Komponente wie folgt rendern:

import useSWR from "swr"\nfunction Home () {\n const fetcher = (...args) => fetch(...args).then(res => res.json());\n const {data, error} = useSWR("/api/data", fetcher);\n if (error) return <div>failed to load</div>\n if (!data) return <div>loading...</div>\n return <div>{data}</div>\n}\n

Dies ist eine einfache Implementierung von SWR. Die SWR -Dokumentation geht tiefer, also schauen Sie sie sich an, um mehr zu erfahren.

Warum SWR verwenden?

SWR hat viele Vorteile gegenüber anderen Datenabrufmethoden.

Caching

Bei herkömmlichen Datenabrufmethoden müssen Sie einen Spinner oder eine Ladenachricht verwenden, um die Benutzererfahrung zu verbessern, wenn die App Daten abruft.

Mit SWR können Sie dem Benutzer veraltete Daten anzeigen, während Sie sie erneut validieren. Das bedeutet, dass der Benutzer nicht warten muss, bis der Abrufer Daten zurückgibt.

Revalidierung

Durch die Revalidierung macht SWR die zwischengespeicherten Daten wieder frisch und die Seite wird mit aktuellen Daten neu gerendert. Die Revalidierung ist besonders wichtig für Websites, deren Inhalt sich regelmäßig ändert.

Seitennummerierung

Mit dem useSWRInfinite-Hook von SWR können Sie auf einfache Weise eine Paginierung implementieren oder sogar eine Benutzeroberfläche mit unendlichem Laden erstellen.

Wiederherstellung der Bildlaufposition

SWR ermöglicht es einem Benutzer, zur Bildlaufposition auf einer Seite zurückzukehren, wenn er zu dieser zurückkehrt. Dies trägt zu einer besseren Benutzererfahrung bei.

Abhängiger Datenabruf

Sie können Daten abrufen, die von anderen Daten abhängig sind. Es ermöglicht Ihnen, die von einer Anfrage zurückgegebenen Daten in einer anderen Anfrage zu verwenden.

Verwenden Sie SWR, um die Benutzerfreundlichkeit zu verbessern

SWR ist ein Tool zum Abrufen von Daten mit einer Funktion zur automatischen Neuvalidierung, mit der Anwendungen zwischengespeicherte Inhalte rendern können, während sie auf aktuelle Inhalte warten. Benutzer können sofort mit Inhalten interagieren, anstatt darauf zu warten, dass der Server Daten zurückgibt.

SWR hilft Ihnen auch beim Erstellen von Paginierung, unendlichem Laden, Wiederherstellen der Bildlaufposition und anderen komplexen Funktionen. Wenn Sie Daten abrufen, die regelmäßig aktualisiert werden müssen, sollten Sie die Verwendung unbedingt in Betracht ziehen.