API interne Réfléchissez avec getSerVersideProps dans next.js

Les nouveaux arrivants sont souvent rencontrés un dilemma lors de la remise des données entre les pages ou les composants. Par exemple, lorsque vous utilisez getSerVersIDEProps () pour récupérer une API interne qui renvoie les 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 conseille de l'utilisation de Fetch () pour appeler les routes API dans getServersIDEPROPS ().

Pourquoi éviter les routes API de récupération dans getServersideProps ()?

APPEL getServersIDEPROPS () et les routes API s'exécutent sur le serveur. Cette demande supplémentaire est inefficace et n'offre aucun avantage supplémentaire.

Pratique recommandée

au lieu d'appeler l'API interne à partir de getServersIDEProps (), la logique doit être directement importée à partir de la route API. Cela permet à getSerVersIDEProps () d'interagir directement avec la base de données, le système de fichiers ou d'autres ressources sans introduire un exemple de refactor

Exporter le gestionnaire de fonctions asynchrones par défaut (req, res) { const Response = attendre fetch (/ * point de terminaison de l'API externe * /); const jSondata = attendre la réponse.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 de l'API et getServerIdeProps ():

// pages / api / user Exporter la fonction asynchrone getData () { const Response = attendre fetch (/ * point de terminaison de l'API externe * /); const jSondata = attendre la réponse.json (); retour jsondata; } Exporter le gestionnaire de fonctions asynchrones par défaut (req, res) { const jSondata = attendre getData (); res.status (200) .json (jsondata); }

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

Cela permet de réutiliser la fonction getData () dans getServersIDEPROPS ():

// pages / home import {getData} de './api/user'; Exporter la fonction asynchrone getServersIDEPROPS (Context) { const jSondata = attendre getData (); // ... }

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

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