Pourquoi devrais-je éviter d'utiliser Fetch pour les API internes dans getServerSideProps() ?

Récupération d'API interne avec getServerSideProps dans Next.js

Les nouveaux arrivants sur Next.js rencontrent souvent un dilemme lorsqu'ils traitent de la récupération de données entre des pages ou composants. Par exemple, lorsque vous utilisez getServerSideProps() pour récupérer une API interne qui renvoie des données utilisateur, il est naturel de penser que cette approche est idéale à des fins de référencement. Cependant, la documentation Next.js déconseille d'utiliser fetch() pour appeler des routes API dans getServerSideProps().

Pourquoi éviter de récupérer des routes API dans getServerSideProps() ?

L'appel d'une route API interne avec fetch() dans getServerSideProps() n'est pas nécessaire car getServerSideProps() et les routes API s'exécutent sur le serveur. Cette requête supplémentaire est inefficace et n'apporte aucun avantage supplémentaire.

Pratique recommandée

Au lieu d'appeler l'API interne depuis getServerSideProps(), la logique doit être directement importée depuis le Itinéraire API. Cela permet à getServerSideProps() d'interagir directement avec la base de données, le système de fichiers ou d'autres ressources sans introduire d'appels API inutiles.

Exemple de refactor

Considérez une route API utilisée pour la récupération données provenant d'une API externe :

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

Cette logique peut être extraite dans une fonction distincte qui peut être utilisée à la fois dans la route API et dans getServerSideProps() :

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

Cela permet au Fonction getData() à réutiliser dans getServerSideProps() :

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

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

En suivant ces directives, les développeurs peuvent améliorer les performances et l'efficacité de leurs applications Next.js tout en conservant les avantages du référencement.

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!