Comment puis-je récupérer des données efficacement dans Next.js 13 pour éviter les données non définies ?

Obstacle à la récupération de données dans Next.js : résolution de données non définies

Next.js propose plusieurs méthodes pour la récupération de données côté serveur, notamment getStaticProps et getServerSideProps. Cependant, ces méthodes sont principalement destinées aux composants de page contenus dans le dossier pages. Dans Next.js 13, un nouveau concept connu sous le nom de composants serveur a émergé, permettant la récupération de données directement dans le corps du composant.

Composants serveur : une solution complète

Les composants serveur offrent une approche plus flexible à la récupération de données, permettant aux développeurs de :

• Récupérer des données sur le serveur avec la possibilité de mettre en cache les résultats, similaire à getStaticProps.
• Récupérez les données sur chaque requête, comme pour getServerSideProps.
• Spécifiez une stratégie de revalidation personnalisée.

Pour utiliser les composants serveur, définissez votre composant par défaut export d'un fichier dans le répertoire de l'application. La récupération de données peut être effectuée dans le corps du composant en utilisant les méthodes suivantes :

import { headers, cookies } from "next/headers";

export default async function Component({ params, searchParams }) {
  // Cached until manually invalidated
  const staticData = await fetch(`https://...`, { cache: "force-cache" });

  // Refetched on every request
  const dynamicData = await fetch(`https://...`, { cache: "no-store" });

  // Revalidated with a 10-second lifetime
  const revalidatedData = await fetch(`https://...`, { next: { revalidate: 10 } });
}

Approches alternatives

En plus des composants serveur, vous pouvez également récupérer des données à l'aide de bibliothèques ou interagir directement avec une base de données. en utilisant un ORM. Dans de tels scénarios, vous pouvez tirer parti de la configuration du segment de route :

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

import prisma from "./lib/prisma";

// Caching options
export const revalidate = 10; // Revalidate every 10s
// OR
export const dynamic = "force-dynamic"; // No caching

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

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

En utilisant des composants de serveur ou des approches alternatives, vous pouvez récupérer efficacement les données sur le serveur dans Next.js, résolvant ainsi le problème des données non définies rencontrées lors de l'utilisation de uniquement sur getStaticProps.

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!