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

Récupération de données côté serveur dans Next.js

Récupération de données côté serveur dans Next.js 13 et au-delà

Dans les versions récentes de Next.js, les méthodes « getStaticProps » et « getServerSideProps » ont été progressivement supprimées, laissant les développeurs se demander comment récupérer des données côté serveur dans les applications Next.js modernes.

Présentation du serveur Composants

Avec Next.js 13 et versions ultérieures, l'introduction des composants serveur offre une nouvelle façon de récupérer des données côté serveur. Contrairement aux composants de page traditionnels, les composants serveur peuvent accéder directement à la logique de récupération de données dans le corps du composant.

Exemple dans les composants serveur

L'extrait de code suivant illustre comment récupérer des données côté serveur au sein d'un composant serveur :

export default async function Component() {
  // Fetch server-side data with caching options
  const staticData = await fetch(`https://...`, { cache: "force-cache" });
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });

  return "...";
}

Configuration du segment de route

En plus des composants serveur, Next.js fournit la configuration du segment de route. Cela permet aux développeurs de contrôler le comportement de mise en cache pour des routes ou des pages spécifiques, même pendant la récupération de données côté serveur.

Exemple dans la configuration du segment de route

Cet exemple montre comment configurer mise en cache spécifique à l'itinéraire à l'aide de la configuration du segment d'itinéraire :

// layout.js OR page.js OR route.js ??

export const revalidate = 10; // Revalidate every 10s
// ...

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

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!