Sollten Sie „fetch()' für interne APIs in „getServerSideProps()' in Next.js verwenden?

Interne API in getServerSideProps abrufen: SEO und Best Practices in Einklang bringen

Einführung:

In Next.js können Komponentendaten mit getServerSideProps() auf den Server geladen werden. Dies unterstützt die Suchmaschinenoptimierung, da Requisiten serverseitig abgerufen und verarbeitet werden, was ein sofortiges Rendern ermöglicht. Laut Next.js-Dokumentation wird jedoch davon abgeraten, fetch() für den Zugriff auf interne API-Routen innerhalb von getServerSideProps() zu verwenden. Dieser Artikel befasst sich mit den Gründen für diese Empfehlung und untersucht alternative Ansätze, die die SEO-Kompatibilität aufrechterhalten.

Vermeiden Sie den direkten Aufruf interner APIs mit fetch()

Während fetch() dies kann zum Abrufen von Daten aus internen API-Routen innerhalb von getServerSideProps() eingesetzt werden, wird davon abgeraten. Die serverseitige Natur von getServerSideProps() ermöglicht Ihnen den direkten Zugriff auf Logik, Datenbanken und andere Ressourcen, ohne dass eine zusätzliche API-Anfrage erforderlich ist.

Wiederverwendung der API-Routenlogik in getServerSideProps()

Um dies zu umgehen, sollten Sie erwägen, die Abruffunktionalität der API-Route in eine separate Funktion zu extrahieren. Diese Funktion kann sowohl über die API-Route als auch innerhalb von getServerSideProps() aufgerufen werden, wodurch die gemeinsame Nutzung der Datenabruflogik ermöglicht und gleichzeitig unnötige API-Aufrufe vermieden werden.

Beispiel:

Angenommen, die API-Route „pages/api/user“ enthält den folgenden Code:

export default async function handler(req, res) {
    const response = await fetch(/* external API endpoint */);
    const jsonData = await response.json();
    res.status(200).json(jsonData);
}

Wir können die Datenabruflogik in eine Funktion namens getData() extrahieren:

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);
}

In getServerSideProps() können wir dann getData() verwenden:

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

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

Durch die Implementierung dieses Ansatzes behalten wir die Effizienz und SEO-Vorteile von getServerSideProps() bei und respektieren gleichzeitig die von Next empfohlenen Datenabrufpraktiken. js.

Das obige ist der detaillierte Inhalt vonSollten Sie „fetch()' für interne APIs in „getServerSideProps()' in Next.js verwenden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!