Wie ruft man Daten serverseitig in Next.js 13 und höher ab?

Serverseitiger Datenabruf in Next.js

Serverseitiger Datenabruf in Next.js 13 und höher

In neueren Versionen von Next.js wurden die Methoden „getStaticProps“ und „getServerSideProps“ eingestellt, sodass sich Entwickler fragten, wie sie Daten serverseitig in modernen Next.js-Anwendungen abrufen können.

Wir stellen vor: Server Komponenten

Mit Next.js 13 und höher bietet die Einführung von Serverkomponenten eine neue Möglichkeit, Daten serverseitig abzurufen. Im Gegensatz zu herkömmlichen Seitenkomponenten können Serverkomponenten direkt auf die Datenabruflogik im Hauptteil der Komponente zugreifen.

Beispiel für Serverkomponenten

Der folgende Codeausschnitt veranschaulicht, wie Daten abgerufen werden serverseitig innerhalb einer Serverkomponente:

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 "...";
}

Routensegmentkonfiguration

Zusätzlich zu Serverkomponenten bietet Next.js die Routensegmentkonfiguration. Dadurch können Entwickler das Caching-Verhalten für bestimmte Routen oder Seiten steuern, auch während des serverseitigen Datenabrufs.

Beispiel für die Routensegmentkonfiguration

Dieses Beispiel zeigt, wie man konfiguriert Routenspezifisches Caching mithilfe der Routensegmentkonfiguration:

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

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

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

Das obige ist der detaillierte Inhalt vonWie ruft man Daten serverseitig in Next.js 13 und höher ab?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!