Devriez-vous utiliser « fetch() » pour les API internes dans « getServerSideProps() » dans Next.js ?

Récupération de l'API interne dans getServerSideProps : équilibrer le référencement et les meilleures pratiques

Introduction :

Dans Next.js, les données des composants peuvent être chargées sur le serveur à l'aide de getServerSideProps(). Cela facilite le référencement, car les accessoires sont récupérés et traités côté serveur, permettant un rendu immédiat. Cependant, l'utilisation de fetch() pour accéder aux routes API internes dans getServerSideProps() est déconseillée selon la documentation Next.js. Cet article examine les raisons de cette recommandation et explore des approches alternatives qui maintiennent la compatibilité SEO.

Évitez d'appeler les API internes directement avec fetch()

Bien que fetch() puisse être utilisé pour récupérer des données à partir de routes API internes dans getServerSideProps(), cela est déconseillé. La nature côté serveur de getServerSideProps() vous permet d'accéder directement à la logique, aux bases de données et à d'autres ressources sans avoir besoin d'une requête API supplémentaire.

Réutilisation de la logique de route API dans getServerSideProps()

Pour surmonter ce problème, envisagez d'extraire la fonctionnalité de récupération de la route API dans une fonction distincte. Cette fonction peut être invoquée à la fois par la route API et dans getServerSideProps(), permettant le partage de la logique de récupération de données tout en évitant les appels API inutiles.

Exemple :

En supposant que la route API, pages/api/user, contient le code suivant :

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

Nous pouvons extraire la logique de récupération des données dans une fonction appelée getData() :

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

Dans getServerSideProps(), nous pouvons ensuite utiliser getData() :

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

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

En mettant en œuvre cette approche, nous maintenons l'efficacité et les avantages SEO de getServerSideProps() tout en respectant les pratiques de récupération de données recommandées décrites par Next. js.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!