Datenabruf zur Laufzeit

Wenn Sie Daten zur Laufzeit (request time) abrufen müssen, anstatt während des Builds, können Sie Server-seitiges Rendering (SSR) verwenden:

Um Server-seitiges Rendering (SSR) zu nutzen, müssen Sie getServerSideProps anstelle von getStaticProps in Ihrer Seite exportieren.

Verwendung von getServerSideProps

Hier ist der Starter-Code für getServerSideProps. Für unser Blog-Beispiel ist dies nicht notwendig, daher werden wir es nicht implementieren.

export async function getServerSideProps(context) {
  return {
    props: {
      // props für Ihre Komponente
    },
  };
}

Da getServerSideProps zur Laufzeit aufgerufen wird, enthält sein Parameter (context) anfragespezifische Parameter.

Sie sollten getServerSideProps nur verwenden, wenn Sie eine Seite vorrendern müssen, deren Daten zur Laufzeit abgerufen werden müssen. Die Time to First Byte (TTFB) wird langsamer sein als bei getStaticProps, da der Server das Ergebnis bei jeder Anfrage neu berechnen muss und das Ergebnis ohne zusätzliche Konfiguration nicht von einer CDN zwischengespeichert werden kann.

Client-seitiges Rendering

Wenn Sie die Daten nicht vorrendern müssen, können Sie auch die folgende Strategie (genannt Client-seitiges Rendering (CSR)) verwenden:

• Statisch generieren (vorrendern) Sie Teile der Seite, die keine externen Daten benötigen.
• Wenn die Seite geladen wird, rufen Sie die externen Daten clientseitig mit JavaScript ab und füllen Sie die restlichen Teile aus.

Dieser Ansatz eignet sich gut für Benutzer-Dashboard-Seiten. Da ein Dashboard eine private, benutzerspezifische Seite ist, ist SEO nicht relevant, und die Seite muss nicht vorgerendert werden. Die Daten werden häufig aktualisiert, was einen Datenabruf zur Laufzeit erfordert.

SWR

Das Team hinter Next.js hat einen React Hook für den Datenabruf namens SWR entwickelt. Wir empfehlen ihn wärmstens, wenn Sie Daten clientseitig abrufen. Er übernimmt Caching, Revalidierung, Fokus-Tracking, Intervall-Abruf und mehr. Wir gehen hier nicht auf die Details ein, aber hier ist ein Beispiel:

import useSWR from 'swr';
 
function Profile() {
  const { data, error } = useSWR('/api/user', fetch);
 
  if (error) return <div>failed to load</div>;
  if (!data) return <div>loading...</div>;
  return <div>hello {data.name}!</div>;
}

Weitere Informationen finden Sie in der SWR-Dokumentation.

Das war's!

In der nächsten Lektion erstellen wir Seiten für jeden Blog-Beitrag mit dynamischen Routen.

Nochmals: Vertiefende Informationen zu getStaticProps und getServerSideProps finden Sie in der Dokumentation zum Datenabruf.