Comment récupérer des données côté serveur dans Next.js avec les composants serveur et au-delà ?

Récupération de données côté serveur Next.js à l'aide de getStaticProps et au-delà

Problème :
Dans un prochain Application .js utilisant Django Rest Framework, la récupération de données à partir d'une API REST entraîne des valeurs non définies et des erreurs d'exécution lorsque mapper les données.

Explication :
Les méthodes Next.js comme getStaticProps sont spécifiquement conçues pour la récupération de données côté serveur et ne fonctionnent efficacement que dans le répertoire des pages. Cependant, dans les dernières versions de Next.js, les données peuvent être récupérées directement dans les composants du serveur situés dans le répertoire de l'application.

Résolution :
Pour résoudre ce problème et effectuer le serveur- côté récupération de données dans le dernier Next.js, envisagez les options suivantes :

Utilisation du serveur Composants :

• Implémentez la récupération de données côté serveur dans le corps du composant, comme indiqué dans l'extrait de code.
• Cette approche permet un accès direct aux en-têtes et aux cookies pour la récupération des données. .

Utilisation de la configuration du segment de route (pour la base de données Interactions) :

• Configurez les segments d'itinéraire pour mettre en cache les données avec la durée de vie souhaitée (par exemple, 10 secondes) ou désactivez complètement la mise en cache.
• Cette méthode permet une flexibilité dans la récupération des données et stratégies de mise en cache, y compris les interactions directes avec les bases de données à l'aide d'ORM.

Extraits de code (Composants du serveur) :

// page.js
export default async function Page() {
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  return "...";
}

Extraits de code (configuration du segment d'itinéraire) :

// layout.js OR page.js OR route.js
export const revalidate = 10;

// ...
async function getPosts() {
  const posts = await prisma.post.findMany();
  return posts;
}

export default async function Page() {
  const posts = await getPosts();
  // ...
}

En implémentant ces solutions, vous pouvez récupérez efficacement les données des serveurs et gérez les stratégies de mise en cache dans Next.js, même lorsque vous travaillez avec des composants du serveur.

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!