Warum sollte ich die Verwendung von Fetch für interne APIs in getServerSideProps() vermeiden?

Interner API-Abruf mit getServerSideProps in Next.js

Neulinge bei Next.js stehen oft vor einem Dilemma, wenn es um den Datenabruf zwischen Seiten oder geht Komponenten. Wenn man beispielsweise getServerSideProps() verwendet, um eine interne API abzurufen, die Benutzerdaten zurückgibt, kann man davon ausgehen, dass dieser Ansatz ideal für SEO-Zwecke ist. In der Next.js-Dokumentation wird jedoch davon abgeraten, fetch() zum Aufrufen von API-Routen in getServerSideProps() zu verwenden.

Warum das Abrufen von API-Routen in getServerSideProps() vermeiden?

Der Aufruf einer internen API-Route mit fetch() innerhalb von getServerSideProps() ist nicht erforderlich, da sowohl getServerSideProps() als auch API-Routen auf dem Server ausgeführt werden. Diese zusätzliche Anfrage ist ineffizient und bietet keinen zusätzlichen Nutzen.

Empfohlene Vorgehensweise

Anstatt die interne API von getServerSideProps() aufzurufen, sollte die Logik direkt aus importiert werden API-Route. Dadurch kann getServerSideProps() direkt mit der Datenbank, dem Dateisystem oder anderen Ressourcen interagieren, ohne unnötige API-Aufrufe einzuführen.

Beispiel-Refactor

Stellen Sie sich eine API-Route vor, die zum Abrufen verwendet wird Daten von einer externen API:

// pages/api/user
export default async function handler(req, res) {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await 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 getServerSideProps() verwendet werden kann:

// pages/api/user
export async function getData() {
  const response = await fetch(/* external API endpoint */);
  const jsonData = await response.json();
  return jsonData;
}

export default async function handler(req, res) {
  const jsonData = await getData();
  res.status(200).json(jsonData);
}

Dies ermöglicht die getData()-Funktion zur Wiederverwendung in getServerSideProps():

// pages/home
import { getData } from './api/user';

export async function getServerSideProps(context) {
  const jsonData = await getData();
  //...
}

Durch Befolgen dieser Richtlinien können Entwickler die Leistung und Effizienz ihrer Next.js-Anwendungen verbessern und gleichzeitig SEO-Vorteile beibehalten.

Das obige ist der detaillierte Inhalt vonWarum sollte ich die Verwendung von Fetch für interne APIs in getServerSideProps() vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!