Comment récupérer les API internes et implémenter la mise en cache dans getServerSideProps() de Next.js ?

Récupération des API internes dans getServerSideProps : meilleures pratiques et mise en cache

Dans Next.js, la gestion efficace des données entre les pages et les composants est cruciale. Cependant, certaines pratiques doivent être suivies pour garantir de bonnes pratiques de codage et la conformité SEO. Cet article aborde le problème de l'exécution de récupérations d'API internes dans getServerSideProps().

Utilisation de fetch() dans getServerSideProps()

Contrairement à ce que l'on pensait précédemment, la documentation Next.js déconseille d'utiliser fetch( ) pour appeler des routes API internes dans getServerSideProps(). Au lieu de cela, il suggère de transférer la logique de la route API directement vers getServerSideProps(). Cela élimine une requête supplémentaire inutile puisque getServerSideProps() et les routes API s'exécutent sur le serveur.

Avantages de l'extraction de la logique API

Séparer la logique de récupération de la route API permet non seulement sa réutilisation dans la route API elle-même mais aussi dans getServerSideProps(). Cette approche simplifie la gestion de la base de code et améliore la flexibilité.

Considérations sur la mise en cache

La mise en cache joue un rôle essentiel dans l'amélioration des performances. La mise en cache côté client utilisant des techniques telles que SWR est simple. Cependant, la mise en cache sur le serveur nécessite des approches différentes. Une technique consiste à implémenter la logique de mise en cache directement dans getServerSideProps(), en exploitant les mécanismes de cache côté serveur tels que Redis ou Memcached.

Exemple de refactor

Considérez l'exemple suivant :

// pages/api/user.js
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 ce cas, la fonction getData(), qui encapsule la logique de récupération, peut être utilisée à la fois dans le gestionnaire de route API et dans getServerSideProps(). Cela permet un code plus propre et une acquisition de données efficace.

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!