Maison > interface Web > js tutoriel > Devriez-vous utiliser « fetch() » pour les appels d'API internes dans « getServerSideProps » (Next.js) ?

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

Linda Hamilton
Libérer: 2024-11-13 03:08:02
original
274 Les gens l'ont consulté

Should You Use `fetch()` for Internal API Calls in `getServerSideProps` (Next.js)?

Récupération d'API interne avec getServerSideProps ? (Next.js)

Dans Next.js, la fonction getServerSideProps vous permet de récupérer des données du serveur avant de restituer une page, la rendant adaptée au référencement. Cependant, la documentation officielle déconseille d'utiliser fetch() pour appeler des routes API internes dans getServerSideProps.

Raison d'évitement

L'appel d'une route API interne depuis getServerSideProps est redondant car les deux fonctionnent sur le serveur. Au lieu de cela, la logique de la route API doit être directement implémentée dans getServerSideProps pour éviter les requêtes HTTP inutiles.

Approche alternative

Pour utiliser la logique d'une route API dans getServerSideProps :

  • Extraire la logique de récupération (par exemple, accès à la base de données ou appels d'API externes) dans un fonction distincte qui peut être partagée à la fois par la route API et par getServerSideProps.
  • Dans la route API, appelez cette fonction partagée pour récupérer et renvoyer les données.
  • Dans getServerSideProps, appelez la même fonction partagée pour récupérer les données directement à partir du serveur.

Exemple

pages/api/user.js (route API avec logique partagée)

import { getData } from "./userData";

export async function handler(req, res) {
  const data = await getData();
  res.status(200).json({ data });
}
Copier après la connexion

pages/home.js (getServerSideProps utilisant le partage logique)

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

export async function getServerSideProps(context) {
  const data = await getData();
  // ... other operations ...
}
Copier après la connexion

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!

source:php.cn
Déclaration de ce site Web
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Derniers articles par auteur
Tutoriels populaires
Plus>
Derniers téléchargements
Plus>
effets Web
Code source du site Web
Matériel du site Web
Modèle frontal