Photo by Lautaro Andreani on Unsplash
Hallo zusammen! Wie war der erste Tag eures langen Wochenendes? Heute möchte ich mit euch Konzepte verschiedener Web-Rendering-Modi teilen: SSG, SSR, CSR und ISR. Sie sehen ähnlich aus, haben aber unterschiedliche Details. Bevor wir uns entscheiden, welches wir verwenden, schauen wir uns die Einführungen unten an!
Static Site Generation (SSG)
SSG oder statische Generierung (Static Generation) bedeutet, dass HTML-Dateien beim Erstellen (Build) des gesamten Projekts generiert werden. Diese HTML-Dateien enthalten bereits die anzuzeigenden Daten. Dieser Rendering-Modus ist eine Art von Pre-Rendering. SSG ist sehr gut geeignet für statische Websites, bei denen sich der Inhalt nicht ändert, da alle Daten zur Build-Zeit abgerufen werden. Diese HTML-Dateien können auf einem CDN platziert und zwischengespeichert (cached) werden, um die Website-Leistung zu verbessern. Darüber hinaus ist die Verwendung des SSG-Rendering-Modus auch für SEO vorteilhaft.
Server-side Rendering (SSR)
SSR oder serverseitiges Rendering (Server-side Rendering) bedeutet, dass jedes Mal, wenn der Browser (Client-Seite) eine Anfrage (Request) sendet, der Server die HTML-Datei generiert und zur Anzeige an den Browser zurücksendet. Dieser Rendering-Modus eignet sich sehr gut für Daten, die sich häufig ändern. Da der Server jedoch Zeit benötigt, um die HTML-Datei zu generieren, ist die Antwortzeit der Website länger und die Benutzer sehen während des Wartens einen weißen Bildschirm. SSR gilt auch als eine Art von Pre-Rendering, daher ist es auch ziemlich SEO-freundlich~ Es sollte jedoch beachtet werden, dass diese Methode erfordert, dass der Server ständig Benutzeranfragen verarbeitet.
Client-side Rendering (CSR)
CSR oder clientseitiges Rendering (Client-side Rendering) bedeutet im Grunde genau das, was der Name sagt. Die vom Server an den Browser gesendete HTML-Datei kann als inhaltslos betrachtet werden. Der Browser kann erst auf dem Bildschirm rendern, nachdem er Daten vom Server abgerufen hat. Der von SPA (Single Page Application wie React oder Vue) verwendete Rendering-Modus ist CSR. Der größte Vorteil dieses Modus ist, dass beim Wechseln der Seiten keine Dateien erneut vom Server abgerufen werden müssen, sodass Benutzer keinen weißen Bildschirm sehen, was als sehr gute Benutzererfahrung gilt. Die Rendering-Zeit hängt jedoch von der Umgebung des Clients ab, und aus diesem Grund wird die Last auf dem Server erheblich reduziert.
Incremental Static Regeneration (ISR)
ISR oder inkrementelle statische Regenerierung (Incremental Static Regeneration) ist ein Rendering-Modus, von dem man weniger hört, und gilt auch als eine Art von Pre-Rendering. ISR generiert alle (oder einen Teil der) HTML-Dateien beim Erstellen des Projekts. Wenn eine neue Anfrage vorliegt und eine vorgegebene Zeit vergangen ist, liefert der Server dem Browser zuerst die alte Datei, während er im Hintergrund die neueste Datei neu generiert, und sendet sie dann nach Abschluss der Generierung zur Anzeige an den Browser. Wenn ein Benutzer zu einer Seite geht, die noch nicht generiert wurde, generiert der Server die Datei an Ort und Stelle und speichert sie im Cache, sodass der nächste Benutzer auf dieser Seite die Datei direkt aus dem Cache abrufen kann. ISR ist SSG sehr ähnlich, löst aber das Problem, dass SSG Dateninhalte nicht aktualisieren kann, und HTML-Dateien werden auch auf dem CDN zwischengespeichert, sodass es im Vergleich zu SSR auch die Last auf dem Server reduziert.
Welches sollten Sie verwenden?
Jeder Rendering-Modus hat seine Vor- und Nachteile, und welcher gewählt wird, hängt von unserem Projekt ab. Es gibt keinen klaren Gewinner.
- Interne System-Dashboards, bei denen sich Daten ständig ändern und kein SEO erforderlich ist, sind sehr gut für die Verwendung von CSR geeignet.
- Wenn die Datenänderungsrate nicht niedrig ist, aber SEO erforderlich ist, können Sie die Verwendung von SSR in Betracht ziehen.
- Wenn Daten selten aktualisiert werden müssen, wie bei Event- oder Marketing-Websites, und SEO ebenfalls wichtig ist, ist die Verwendung von SSG sehr gut geeignet.
- Wenn Daten nicht viel aktualisiert werden müssen oder es zu viele Seiten gibt und SEO erforderlich ist, wie z. B. Produktseiten, dann ist ISR eine gute Wahl.
Ich habe auch eine Tabelle gezeichnet (auf Englisch XD), schaut sie euch an~
Pre-render in Next.js
Next.js bietet integrierte Unterstützung für die oben genannten Rendering-Modi und verwendet standardmäßig auch SSG, um Webseiten zu rendern, die keine Daten abrufen (fetch) müssen. Wenn Sie Daten vom Server abrufen müssen, wird es mit CSR (hybrid) gemischt. Wenn Sie andere Rendering-Modi verwenden möchten, können Sie die folgenden von Next.js bereitgestellten Funktionen verwenden:
| Function | Description |
|---|---|
| getStaticProps (Static Generation) | Ruft erforderliche Daten zur Build-Zeit ab und fügt sie in die HTML-Datei ein |
| getStaticPaths (Static Generation) | Entscheidet, welche dynamischen (dynamic) Routen zur Build-Zeit als HTML-Dateien generiert werden müssen |
| getServerSideProps (Server-side Rendering) | Eine Funktion, die jedes Mal ausgeführt wird, wenn der Browser eine Anfrage sendet, um die erforderlichen Daten abzurufen |
Fazit
Das war’s für heute, machen wir morgen weiter~ Morgen werde ich mit euch teilen, wie man diese drei Funktionen verwendet, um Websites mit verschiedenen Rendering-Modi zu implementieren! Was denkt ihr über die heute gelernten Rendering-Modi?