Wie kann ich Daten in Next.js 13 effizient abrufen, um undefinierte Daten zu vermeiden?

Hindernis beim Datenabruf in Next.js: Auflösen undefinierter Daten

Next.js bietet mehrere Methoden für den serverseitigen Datenabruf, darunter getStaticProps und getServerSideProps. Diese Methoden sind jedoch in erster Linie für Seitenkomponenten innerhalb des Seitenordners gedacht. In Next.js 13 entstand ein neues Konzept namens Server Components, das den Datenabruf direkt innerhalb des Komponentenkörpers ermöglicht.

Server Components: Eine umfassende Lösung

Server Components bieten einen flexibleren Ansatz zum Datenabruf, sodass Entwickler:

• Daten auf dem Server abrufen können, mit der Option, die Ergebnisse zwischenzuspeichern, ähnlich wie getStaticProps.
• Daten bei jeder Anfrage abrufen, ähnlich wie bei getServerSideProps.
• Geben Sie eine benutzerdefinierte Revalidierungsstrategie an.

Um Serverkomponenten zu verwenden, definieren Sie Ihre Komponente als Standard Export einer Datei in das App-Verzeichnis. Der Datenabruf kann innerhalb des Komponentenkörpers mit den folgenden Methoden durchgeführt werden:

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 } });
}

Alternative Ansätze

Zusätzlich zu Serverkomponenten können Sie Daten auch mithilfe von Bibliotheken abrufen oder direkt mit einer Datenbank interagieren unter Verwendung eines ORM. In solchen Szenarien können Sie Route Segment Config nutzen:

// 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();
}

Durch die Verwendung von Serverkomponenten oder alternativen Ansätzen können Sie Daten effizient auf dem Server in Next.js abrufen und so das Problem undefinierter Daten beheben, die beim Verlassen auftreten ausschließlich auf getStaticProps.

Das obige ist der detaillierte Inhalt vonWie kann ich Daten in Next.js 13 effizient abrufen, um undefinierte Daten zu vermeiden?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!