Wie rufe ich Daten serverseitig in Next.js mit Serverkomponenten und darüber hinaus ab?

Serverseitiger Datenabruf von Next.js mit getStaticProps und darüber hinaus

Problem:
In einem Next Bei einer .js-Anwendung, die das Django Rest Framework nutzt, führt der Datenabruf von einer REST-API zu undefinierten Werten und Laufzeitfehlern beim Zuordnen der Daten.

Erklärung:
Next.js-Methoden wie getStaticProps sind speziell für den serverseitigen Datenabruf konzipiert und funktionieren nur effektiv innerhalb des Seitenverzeichnisses. In den neuesten Versionen von Next.js können Daten jedoch direkt innerhalb von Serverkomponenten abgerufen werden, die sich im App-Verzeichnis befinden.

Lösung:
Um dieses Problem zu beheben und Server- Berücksichtigen Sie beim Abrufen von Nebendaten im neuesten Next.js die folgenden Optionen:

Verwenden eines Servers Komponenten:

• Implementieren Sie den serverseitigen Datenabruf innerhalb des Komponentenkörpers, wie im Code-Snippet zu sehen.
• Dieser Ansatz ermöglicht den direkten Zugriff auf Header und Cookies für den Datenabruf .

Verwenden der Routensegmentkonfiguration (für die Datenbank). Interaktionen):

• Konfigurieren Sie Routensegmente, um Daten mit der gewünschten Lebensdauer (z. B. 10 Sekunden) zwischenzuspeichern, oder deaktivieren Sie das Caching ganz.
• Diese Methode ermöglicht Flexibilität beim Datenabruf und Caching-Strategien, einschließlich direkter Interaktionen mit Datenbanken mithilfe von ORMs.

Code-Snippets (Serverkomponenten):

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

  return "...";
}

Codeausschnitte (Routensegmentkonfiguration):

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

Durch die Implementierung dieser Lösungen können Sie Rufen Sie effektiv Daten von Servern ab und verwalten Sie Caching-Strategien in Next.js, auch wenn Sie mit Serverkomponenten arbeiten.

Das obige ist der detaillierte Inhalt vonWie rufe ich Daten serverseitig in Next.js mit Serverkomponenten und darüber hinaus ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!