Home-theater-designers
Moderne Web-Frameworks bieten viele Möglichkeiten, wie eine Website oder App vom Server zum Client bereitgestellt werden kann. Sie können HTML auf beiden Seiten generieren oder für die Hochgeschwindigkeitsverteilung über ein Content-Delivery-Netzwerk vorab rendern.
Die Entscheidung, wie eine Website oder App strukturiert werden soll, hängt von einigen verschiedenen Faktoren ab. Sie müssen wissen, wie Besucher auf Ihre Website oder App zugreifen. Sie sollten verstehen, ob die Ladegeschwindigkeit beim anfänglichen Laden oder bei der nachfolgenden Navigation wichtiger ist. Überlegen Sie auch, wie oft Sie die Website aktualisieren.
MAKEUSEOF VIDEO DES TAGES SCROLLEN SIE, UM MIT DEM INHALT FORTZUFAHREN
Berücksichtigen Sie all diese Faktoren, um die Vor- und Nachteile der einzelnen Rendering-Paradigmen abzuwägen.
Rendern von Websites auf mehr als eine Weise
Das Rendern einer Website bezieht sich auf den Prozess, durch den eine Website in einem Webbrowser angezeigt wird. Es gibt viele verschiedene Möglichkeiten, den Prozess der Konvertierung von Rohdaten in formatiertes HTML auf dem Bildschirm eines Benutzers anzugehen.
Jede Methode hat ihre Vor- und Nachteile, und wenn Sie die Vor- und Nachteile jeder Methode kennen, können Sie die richtige für Ihre Website auswählen.
CSR: Der Browser übernimmt die Verantwortung
CSR steht für Client Side Rendering. Wenn Sie eine App oder Website clientseitig rendern, übergibt der Server außer einem kleinen Stück Boilerplate-Code wenig bis gar kein HTML. Die Seite fordert dann alle benötigten Daten vom Server nach dem Seitenladeereignis über AJAX-Anforderungen an.
Wenn eine App oder Seite clientseitig gerendert wird, übergibt der Server ein Skript an den Client, das den HTML-Code im Browser des Clients generiert. Dies ermöglicht Single-Page-Anwendungen, die den Browser nicht aktualisieren, wenn Sie mit ihnen interagieren.
CSR-Apps werden bei der Navigation oft schnell geladen, aber sie können anfangs langsam geladen werden. Die Geschwindigkeit hängt weitgehend von dem Framework ab, das Sie für das Rendern auswählen, und davon, wie viele zusätzliche Bibliotheken und Add-Ons Sie verwenden. Am meisten beliebte moderne JavaScript-Frameworks beinhalten eine Option für CSR.
Vollständig clientseitig gerenderte Seiten und Apps leiden unter der Unfähigkeit, mithilfe einer URL direkt zu einer bestimmten Seite zu navigieren. Wenn eine clientseitig gerenderte App zum ersten Mal gestartet wird, navigiert sie unabhängig von der eingegebenen URL zum selben Ausgangspunkt.
SSR: Rendern auf einem zentralen Server
SSR steht für Server Side Rendering. Dies ist eine viel traditionellere Form des Webseiten-Renderings, bei der Websites HTML basierend auf Vorlagen generieren und eine Mischung aus HTML, Stylesheets und Skripten an den Client senden. Die Mehrheit von die beliebtesten Backend-Web-Frameworks fallen in diese Kategorie.
Serverseitig gerenderte Apps und Websites haben in der Regel schnellere anfängliche Ladevorgänge, aber jede nachfolgende Navigation erfordert eine vollständige Aktualisierung. Dies bedeutet, dass sie nicht nur länger dauern, sondern dass Entwickler, die mit SSR arbeiten, die Sitzungsverwaltung berücksichtigen müssen.
Der größte Vorteil von SSR-generierten Websites und Apps ist die Konsistenz der Pfadnavigation. Ein Benutzer, der einen bestimmten Pfad eingibt, wird direkt zur angeforderten Seite geleitet. Einige Frameworks verwalten Benutzerumleitungen von Seite zu Seite innerhalb der App, aber Benutzer können anfänglich möglicherweise nicht auf die gewünschte Seite zugreifen.
Viele moderne Frameworks bieten gemischte Lösungen an, die damit beginnen, dem Client eine vom Server gerenderte Seite bereitzustellen. Nachdem die Seite geladen wurde, tritt ein als Hydratation bezeichnetes Ereignis auf, bei dem clientseitige Skriptereignisse an die Steuerelemente der Seite angehängt werden. Von hier an übernimmt der Client die gesamte Navigation.
Eine gemischte Dynamik bietet Benutzern die Möglichkeit, direkt zu jeder Seite in einer App zu gehen, während sie dennoch die Geschwindigkeit und Reibungslosigkeit einer Single-Page-Anwendung erhalten. Next.js bietet mehrere Rendering-Paradigmen , ebenso wie Nuxt.js und Sveltekit.
SSG: Minimiertes Rendern
SSG, oder Static Site Generation, umgeht die Notwendigkeit, HTML auf der Client- oder Serverseite zu generieren. Stattdessen kompilieren Websites und Apps im SSG-Stil jede Seite, die sie benötigen könnten, und schieben die Ergebnisse zur schnellen Bereitstellung an ein CDN.
Dies ist eine äußerst effektive Methode, um Webseiten extrem schnell bereitzustellen. Die Ergebnisse werden normalerweise in einfachen Bündeln zusammengestellt, die alle HTML- und Stylesheets enthalten, die für eine einzelne Seite benötigt werden. Diese Bundles werden so kompakt wie möglich gehalten, um sicherzustellen, dass der Benutzer sie so schnell wie möglich erhält.
SSG-Sites bieten in der Regel außergewöhnlich schnelle Ladegeschwindigkeiten, obwohl für jede Navigation eine Aktualisierung erforderlich ist. Der größte Nachteil einer statischen Website ist jedoch ein Mangel an Flexibilität. Hochdynamische Systeme wie Social-Media-Apps oder komplexe E-Commerce-Plattformen erfordern weitaus mehr Änderungen, als eine SSG problemlos bewältigen kann.
Bei vielen statischen Sites ist auch ein größerer Overhead für die Änderung erforderlich, da jede neue Änderung unabhängig kompiliert werden muss. Dies macht das Rendern im SSG-Stil zu einer schlechten Wahl für Websites, die sich schnell ändern, wie z. B. eine digitale Schaufensterfront mit sich schnell änderndem Inventar oder Social-Media-Apps.
ISR: Von allem etwas
ISR ist die wohl komplexeste Art des Renderns, aber auch die vorteilhafteste. ISR steht für Incremental Static Regeneration. ISR verbindet die Geschwindigkeit und Skalierbarkeit statisch generierter Websites mit der Reaktivität von SSR- und CSR-ähnlichen Apps.
Wenn eine Seite in einer Seite oder App im ISR-Stil angefordert wird, prüft der Server zuerst, ob es eine nicht abgelaufene Version der Seite im Cache gibt. Wenn dies der Fall ist, stellt der Server die zwischengespeicherte Seite sofort bereit.
Wenn keine zwischengespeicherte Version der Seite vorhanden ist oder seit ihrer Generierung genügend Zeit vergangen ist, generiert der Server eine neue Version. Diese neue Version wird an den Client übergeben und für die zukünftige Verwendung zwischengespeichert.
Diese Art des Renderns ist komplexer einzurichten, aber sie automatisiert die meisten Probleme, die normalerweise auf SSG-Sites auftreten. Dadurch können Apps sowohl die Geschwindigkeit als auch die Zuverlässigkeit einer statisch generierten App bieten und gleichzeitig den zusätzlichen Overhead automatisieren.
Mehrere moderne Frameworks bieten bereits die Möglichkeit des Renderns im ISR-Stil. Viele weitere unterstützen die inkrementelle Generierung in der Entwicklung. Die meisten großen Frameworks werden bald ISR-Rendering unterstützen, falls sie dies noch nicht tun.
Welcher Rendering-Typ ist der beste?
Es gibt mehrere Möglichkeiten, eine Website oder App zu rendern. Jede dieser vier Rendering-Arten hat mehrere Variationen. Kein Rendering-Typ ist ideal für alle Projekte, und welchen Typ Sie wählen, hängt davon ab, was auf Ihrer Website oder App am wichtigsten ist.
Was ist beim Kauf eines gebrauchten iPhones zu beachten?
Bei der Auswahl eines Rendering-Paradigmas für Ihr Projekt ist es wichtig, die Geschwindigkeit zu berücksichtigen, wie Ihr Publikum Ihr Projekt verwenden wird und wie oft sich die Website ändern wird. Dies sind die Hauptprinzipien, die Ihnen bei der Entscheidung helfen, wie Sie Ihre Website oder App am besten strukturieren.