In NextJs gibt es also mehrere Möglichkeiten, die Daten abzurufen.
- Klientenseitiges Abrufen (CSR)
- Serverseitiges Abrufen (SSR)
Client-seitiges Abrufen ist die traditionelle Art des Abrufs von Daten in ReactJS in useEffect oder componentDidMount. In NextJs können wir traditionelle Anwendungen wie in ReactJS (CRA) erstellen, ohne spezielle Servermethoden zu verwenden. Das gibt uns die Möglichkeit zu wählen, welche Art von Anwendung wir entwickeln wollen.
Serverseitiges Abrufen wird verwendet, wenn die Daten vorhanden sein sollen, bevor der Browser die JS-Dateien unseres Projekts kompiliert. Dies hilft SEO für Google. In NextJs gibt es drei spezielle Methoden, die wir im Detail durchgehen werden
- getServerSideProps (Server-seitiges Rendering)
- getStaticProps (Statische Erzeugung)
- getStaticPaths (Statische Erzeugung)
getServerSideProps ist eine Methode, die auf dem Server (nodejs) ausgeführt wird, bevor eine Seite gerendert wird. Wenn es eine API-Anforderung für eine Seite gibt, wird diese Methode jedes Mal ausgeführt, wenn ein Benutzer die Seite besucht. Da diese Methode auf einem Server ausgeführt wird, können wir hier Servercode schreiben. Wenn es auf der Seite eine Liste von Elementen gibt, die vom Server abgerufen werden sollen, können wir entweder einen API-Aufruf an den Server richten oder wir können auch eine Datenbankabfrage schreiben, um auf die Daten zuzugreifen (nicht empfohlen). Im Folgenden sind die Anwendungsfälle aufgeführt, für die ich persönlich diese Methode verwende.
Lesen Sie auch: Zustandslose funktionale Komponenten in React
- Wenn eine Seite eine Auth-bezogene Logik erfordert, d.h. Authentifizierung, Refresh-Token, Umleitung
- Ein Backend-Dienst muss ausgeführt werden, bevor die Seite gerendert wird.
getStaticProps ist eine Methode, die zur Erstellungszeit ausgeführt wird. Wenn das Projekt erstellt wird, wird diese Methode ausgeführt und die Daten werden abgerufen und in einer HTML-Datei gespeichert. Wenn ein Benutzer eine Seite aufruft, sind die Daten verfügbar und die Seite wird sofort gerendert.
- Abrufen von Blogdaten oder Daten aus dem CMS
- SEO-bezogene Daten, die zum Zeitpunkt der Erstellung abgerufen und bereitgestellt werden müssen
getStaticPaths ist eine Methode, die neben getStaticProps verwendet wird. Für dynamische Routen funktioniert getStaticProps nicht und Sie müssen getStaticPaths verwenden. Die Anwendungsfälle sind folgende
- Holen Sie sich die Daten einzelner Blog-Seiten zur Erstellungszeit für eine bessere SEO
- Bei dynamischen Routen werden die Daten zum Zeitpunkt der Erstellung für SEO-Zwecke abgerufen.
So funktioniert es, dass wir alle Pfade der dynamischen Routen in getStaticPaths abrufen und Pfade zurückgeben. Für alle diese Pfade wird getStaticProps ausgeführt und somit sind die Daten zum Zeitpunkt der Erstellung verfügbar. Ich werde in naher Zukunft einen eigenen Blog für die statische Generierung in NextJs haben.
Fazit
NextJS bietet eine große Flexibilität bei der Entwicklung Ihrer Anwendung. Es kann SSR oder hybrid sein, um die Leistung von Server und Browser zu erreichen. Es liegt an uns, wie wir die Architektur gestalten.
