interne api fetch mit gentServersideProps in Next.js

Neuankömmlinge zu Next.js heben oft auf ein Dilemma, wenn es mit Daten zwischen den Pages oder Komponenten fällt. Wenn Sie beispielsweise GetServersideProps () zum Abholen einer internen API, die Benutzerdaten zurückgibt, ist es natürlich zu der Annahme, dass dieser Ansatz für SEO -Zwecke ideal ist. In der nächsten Dokumentation wird jedoch die Verwendung von Fetch () API -Routen in getServersideProps ()

Warum vermeiden, API -Routen in GetServersideProps () zu holen? API -Routen werden auf dem Server ausgeführt. Diese zusätzliche Anfrage ist ineffizient und bietet keinen zusätzlichen Vorteil.

empfohlene Praxis

anstatt die interne API von EnsServersideProps () anzurufen, sollte die Logik direkt von der API -Route importiert werden. Dies ermöglicht GetServersideProps (), direkt mit der Datenbank, dem Dateisystem oder anderen Ressourcen zu interagieren, ohne unnötige API -Anrufe einzuführen. Standard -Async -Funktionsbehandlungsbehandlungen (Req, Res) { const response = warte auf fetch (/ * externer API -Endpunkt */); const jsondata = warte auf response.json (); Res.Status (200) .Json (JSondata); }

Diese Logik kann in eine separate Funktion extrahiert werden, die sowohl in der API -Route als auch in der GetServersideProps () verwendet werden kann:

// Seiten/API/Benutzer Exportieren Sie die asynchronisierende Funktion getData () { const response = warte auf fetch (/ * externer API -Endpunkt */); const jsondata = warte auf response.json (); kehren Sie JSondata zurück; } Standard -Async -Funktionsbehandlungsbehandlungen (Req, Res) { const jsondata = warte getData (); Res.Status (200) .Json (JSondata); }

Dies ermöglicht es der Funktion getData (), in GetServersideProps () wiederverwendet zu werden:

// Pages/Home Import {getData} von './api/user'; Exportieren Sie die asynchronisierende Funktion GetServerSideProps (Kontext) { const jsondata = warte getData (); // ... }

Durch Befolgen dieser Richtlinien können Entwickler die Leistung und Effizienz ihrer nächsten.