{"id":681,"date":"2024-12-18T06:47:31","date_gmt":"2024-12-18T05:47:31","guid":{"rendered":"https:\/\/www.vautron.de\/blog\/?p=681"},"modified":"2024-12-18T06:47:31","modified_gmt":"2024-12-18T05:47:31","slug":"was-ist-ein-server-side-rendering-ssr","status":"publish","type":"post","link":"https:\/\/www.vautron.de\/blog\/was-ist-ein-server-side-rendering-ssr","title":{"rendered":"Was ist ein Server Side Rendering (SSR)?"},"content":{"rendered":"\n<p><strong>Eine Webseite besteht aus einem Code in Hypertext Markup Language (HTML), der von einem Browser interpretiert und dargestellt wird. Bei modernen Webseiten setzt sich dieser aus verschiedenen Quellen zusammen, die Einfluss auf den Inhalt, die Funktionalit\u00e4t, das Design oder alle drei Eigenschaften aus\u00fcben. Beim Server Side Rendering (SSR) \u00fcbernimmt der Server die Verarbeitung aller Elemente und erzeugt auf Anfrage einen aktuellen und individualisierten HTML Code. Sein Gegenst\u00fcck, bei dem der Browser den Quelltext selbst erstellt, ist das Client Side Rendering (CSR).<\/strong><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Welche Vorteile besitzt das Server Side Rendering?<\/h3>\n\n\n\n<p>Die ersten <a href=\"https:\/\/www.vautron.de\/blog\/statische-vs-dynamische-webseiten\">dynamischen Webseiten<\/a> verwendeten reines Server Side Rendering und nutzten nahezu ausschlie\u00dflich <strong>lokale Inhalte<\/strong> f\u00fcr die Einbettung ver\u00e4nderlicher Elemente. Ein typisches Beispiel daf\u00fcr bildet der Aufstieg der Programmiersprache PHP, die lange Zeit als erste Wahl f\u00fcr attraktive Content Management Systeme (CMS) und Onlineshops galt. Ein entscheidender Grund f\u00fcr den Aufstieg von Server Side Rendering waren <strong>seine zahlreichen Vorteile<\/strong> gegen\u00fcber dem Client Side Rendering:<\/p>\n\n\n\n<ul>\n<li>Hohe Kompatibilit\u00e4t mit unterschiedlichen Browsern und Betriebssystemen<\/li>\n\n\n\n<li>Schnelles Laden der Startseite \u00fcber eine einzige Verbindung<\/li>\n\n\n\n<li>Ben\u00f6tigt keine zus\u00e4tzliche Software oder Plug-ins auf Seite des Anwenders<\/li>\n\n\n\n<li>G\u00fcnstige SEO wegen rascher Ladezeiten der Seiten<\/li>\n\n\n\n<li>Flexible Integration externer Programmiersprachen wie Python, Perl,<a href=\"https:\/\/www.vautron.de\/blog\/javascript-welche-bedeutung-spielt-es-heute-im-internet\"> JavaScript<\/a> und C\/C++<\/li>\n\n\n\n<li>Keine Abh\u00e4ngigkeiten zu nicht installierten oder veralteten Bibliotheken<\/li>\n\n\n\n<li>Interne Verarbeitung bewirkt verbesserte Sicherheit gegen\u00fcber Cyberangriffen von au\u00dfen<\/li>\n\n\n\n<li>Einfache, zentrale Kontrolle des Designs durch Anweisungen in CSS<\/li>\n<\/ul>\n\n\n\n<p>Allerdings f\u00fchrt das relativ strenge Konzept der einseitigen Verarbeitung von Skripten zu Einschr\u00e4nkungen und Nachteilen, die f\u00fcr eine optimale Entscheidung zwischen Server Side Rendering und Client Side Rendering ber\u00fccksichtigt werden m\u00fcssen.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Worin liegen die Nachtteile von Server Side Rendering<\/h3>\n\n\n\n<p>Das Entstehen und die <strong>zunehmende Popularit\u00e4t von Frameworks<\/strong> haben das moderne Programmieren stark ver\u00e4ndert. In Verbindung mit der zunehmenden Rechenleistung von Endger\u00e4ten f\u00fchrte dies zu einem starken Anstieg von Webseiten, die ein Client Side Rendering verwenden. Den wesentlichen Ausschlag gab die wachsende Komplexit\u00e4t von Inhalten, die neben interaktiven Elementen ebenfalls das Einbinden von fremdem Material einschlie\u00dflich Video- oder Audiostreams einschlie\u00dfen. Unter diesen Voraussetzungen zeigt das Server Side Rendering starke Nachteile:<\/p>\n\n\n\n<ul>\n<li>Jede Aktualisierung einer Webseite erfordert ein vollst\u00e4ndiges neues Laden<\/li>\n\n\n\n<li>Hoher Verbrauch von Ressourcen auf Seiten des Servers<\/li>\n\n\n\n<li>Eingeschr\u00e4nkte Interaktion zum Beispiel f\u00fcr Men\u00fcs oder Browserspiele<\/li>\n\n\n\n<li>Sinkende Performance und Effizienz bei steigender Zahl von Zugriffen<\/li>\n\n\n\n<li>Nicht f\u00fcr Applikationen mit wechselnden Informationen oder Chats in Echtzeit geeignet<\/li>\n<\/ul>\n\n\n\n<p>Aus diesem Grund verwenden einige Webseiten mittlerweile eine Kombination aus Client Side und Server Side Rendering. Dieser Ansatz hat sich vor allem f\u00fcr sogenannte <strong>progressive Web-Apps<\/strong> durchgesetzt, die Grundfunktionen innerhalb eines begrenzten Rahmens erf\u00fcllen, dabei aber auf die Kommunikation mit anderen Programmen oder Informationsquellen angewiesen sind.<\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Welche Faktoren entscheiden die optimale L\u00f6sung zwischen CSR und SSR?<\/h3>\n\n\n\n<p>Aufgrund seiner langen Geschichte und kontinuierlichen Entwicklung gilt das Server Side Rendering nach wie vor als erste Wahl, wenn die Priorit\u00e4t auf <strong>Erreichbarkeit, Stabilit\u00e4t und einer leichten Integration<\/strong> von fremden Anbietern liegt. Allerdings zeigt es Schw\u00e4chen, wenn die aktuellen Bedingungen f\u00fcr Webseiten ber\u00fccksichtigt werden. Der Trend geht zu einer vielseitigen Integration von fremden Anbietern von Medien und sozialen Netzwerken. Hier bieten sich mittlerweile weit <strong>fortgeschrittene hybride Modelle<\/strong> an, die eine Webseite anhand klassischer Parameter wie CSS erstellen. Sie erlauben es gleichzeitig, einzelne Elemente lokal zu verarbeiten und fremde Quellen etwa durch JavaScript zu integrieren. Alternative Ans\u00e4tze bilden zum Beispiel <a href=\"https:\/\/www.vautron.de\/blog\/was-sind-server-side-includes\">Server Side Includes<\/a>.<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Eine Webseite besteht aus einem Code in Hypertext Markup Language (HTML), der von einem Browser interpretiert und dargestellt wird. Bei modernen Webseiten setzt sich dieser aus verschiedenen Quellen zusammen, die &#8230;<\/p>\n","protected":false},"author":3,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[4],"tags":[55,32,29],"_links":{"self":[{"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/posts\/681"}],"collection":[{"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/users\/3"}],"replies":[{"embeddable":true,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/comments?post=681"}],"version-history":[{"count":2,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/posts\/681\/revisions"}],"predecessor-version":[{"id":683,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/posts\/681\/revisions\/683"}],"wp:attachment":[{"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/media?parent=681"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/categories?post=681"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.vautron.de\/blog\/wp-json\/wp\/v2\/tags?post=681"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}