Es gibt zahlreiche Möglichkeiten, Server-Side-Rendering Maßnahmen gezielt und Ressourcen-effizient umzusetzen. Neben allgemeinen wirtschaftlichen sowie projektorientierten Maßnahmen sind die technischen Faktoren von hoher Bedeutung.
In diesem Artikel erklären wir unsere technische Vorgehensweise beim Server-Side-Rendering für ein effizientes Deployment. Also: Technik-Köpfe aufgepasst!
Dieser Artikel ist primär für IT-Manager, IT-Projektleiter oder vergleichbare Positionen mit verwandten Fachwissen gedacht.
Für die neue Website hatten wir uns zunächst für das Framework Vue 3 entschieden. Mit Vue lassen sich unkompliziert dynamisch komplexe Webseiten individuell umsetzen. Deshalb setzen wir auch gerne in unseren Kundenprojekten auf dieses Framework. Ähnlich wie in vielen anderen Frameworks für die Webentwicklung, lassen sich auch in Vue sogenannte Komponenten anlegen, sie ich in verschiedenen Teilen einer Website dann immer wieder einbinden lassen, ohne diese kopieren zu müssen. So spart man unnötige Redundanzen und erhöht die Übersicht der Code-Struktur. Das ist vor allem wichtig, wenn man in einem Team zusammen an einem Projekt arbeitet. Was Vue und viele weitere JavaScript Frameworks besonders macht, ist die Möglichkeit diese Komponenten dynamisch rendern zu lassen, ohne die Webseite erneut laden zu müssen, wie es z.B. bei PHP Frameworks nötig wäre. Bei komplexen Webprojekten arbeiten wir allerdings auch gerne mit Vue und Laravel zusammen, um das beste aus beiden Welten zu kombinieren.
Für unsere Website brauchen wir allerdings kein großes Backend, weshalb wir und auf Vue beschränkt haben. Als Backend für den Blog nutzen wir einfach die Wordpress API.
Einen Nachteil den Vue allerdings hat, ist, dass die Webseite erst nach dem Laden des JavaScripts vom Browser gerendert wird. Bei langsameren Geräten wie z.B. Smartphones, kann das Laden der Webseite dann etwas länger dauern. Um diesem Problem zu entgegnen und die Performance der Webseite zu steigern, gibt es die Möglichkeit mittels Nuxt Webseite zusätzlich Serverseitig zu rendern. Dadurch ist die Webseite schon beim Aufrufen gerendert. So wird z.B. die Wordpress API schon serverseitig abgefragt und der Blogbeitrag entsprechend generiert. Dennoch funktionieren noch alle dynamischen Teile der Seite ohne reload.
Der Nuxt Server, der die Seite rendert, läuft dabei in Node.js. Zusätzlich bietet Nuxt die Möglichkeit, gleichzeitig noch eine API zu hosten und mit in das Projekt zu integrieren. Diese API nutzen wir für das Kontaktformular auf unserer Webseite.
Für das einfache Deployment haben wir uns dazu entschieden, Docker zum Containern und Traefik als Loadbalancer zu nutzen. Dadurch lassen sich sehr schnell und einfach die nötigen routen anlegen, um die Webseite öffentlich zu stellen. Außerdem kümmert sich Traefik automatisch, um die benötigten SSL/TLS-Zertifikate. Da Node.js nicht sehr gut für viele Threads optimiert ist, haben wir die Docker Container einfach auf eine bestimmte Anzahl skaliert. Traefik erkennt dies automatisch und konfiguriert den Loadbalancer entsprechend, der die Requests auf die Container aufteilt. Um den Server weiter zu optimieren, nutzen wir das Traefik Cache Plugin. Im Cache werden dann bereits gerenderte Versionen der Webseite für einen gewissen Zeitraum vorgehalten und bei Bedarf ausgegeben. Da außer des Blogs serverseitig nicht besonders viel wechselnder Content gegeben ist, lassen sich so einige Ressourcen einsparen.
Eine effiziente Methode, allgemeine Prozesse zu verbinden, zu vereinfachen und im Gesamtkontext simpel darzustellen. So klappt es mit wenig Projektaufwand, schnelle und konkrete Ergebnisse zu erzielen, die ebenfalls leicht zu steuern und im unterschiedlichsten Kontext zu implementieren sind.
Das Thema interessiert dich und du willst mehr darüber erfahren? Dann schreibe uns jetzt eine Nachricht und wir melden uns bei dir zurück!
Das Thema ist für dich neu oder du hattest Herausforderungen beim Lesen, die technischen Zusammenhänge schnell für dich einzuordnen?
Dann schreib uns gerne eine Nachricht und wir nehmen dein Feedback gerne auf! Wir möchten unsere Artikel für unterschiedliche Zielgruppen bereitstellen. Manchmal liegt hierbei der Fokus auf Technik und System, manchmal mehr auf projektorientierte Managementmaßnahem. Daher ordnen wir unsere Artikel zu beginn ein. Wir freuen und auf deine Rückmeldung und Anregungen zu diesem Thema!
