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

Next.js bietet mehrere Methoden für den serverseitigen Datenabruf, einschließlich 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 auch Daten mithilfe von Bibliotheken abrufen oder mithilfe eines ORM direkt mit einer Datenbank interagieren. In solchen Szenarien können Sie Route Segment Config:

// 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, das auftritt, wenn Sie sich ausschließlich auf getStaticProps verlassen.