{"id":23945,"date":"2023-02-05T22:55:36","date_gmt":"2023-02-05T21:55:36","guid":{"rendered":"https:\/\/blog.mi.hdm-stuttgart.de\/?p=23945"},"modified":"2023-06-18T17:20:57","modified_gmt":"2023-06-18T15:20:57","slug":"jamstack-und-astro-vor-und-nachteile-einer-serverless-architektur","status":"publish","type":"post","link":"https:\/\/blog.mi.hdm-stuttgart.de\/index.php\/2023\/02\/05\/jamstack-und-astro-vor-und-nachteile-einer-serverless-architektur\/","title":{"rendered":"JAMStack und Astro: Vor- und Nachteile einer serverless Architektur"},"content":{"rendered":"\n

Einleitung<\/strong><\/h2>\n\n\n\n

Seit den fr\u00fchen Tagen der Web-Entwicklung hat die Performance von Websites eine wichtige Rolle gespielt. W\u00e4hrend sich das Internet im Laufe der Jahre weiterentwickelt hat, haben sich auch die Anforderungen an die Performance von Websites erh\u00f6ht. Benutzer erwarten eine schnelle und reibungslose Nutzererfahrung, unabh\u00e4ngig von der Gr\u00f6\u00dfe ihres Ger\u00e4ts oder ihrer Internetverbindung. Eine schlechte Performance kann sich negativ auf das Nutzererlebnis auswirken und zu einer geringeren Zufriedenheit f\u00fchren, was m\u00f6glicherweise zu einem Verlust von Traffic und Umsatz f\u00fchrt. Daher ist es wichtiger denn je, dass Webentwickler die Performance ihrer Websites im Auge behalten und Ma\u00dfnahmen ergreifen, um sicherzustellen, dass sie schnell und effizient laufen.<\/p>\n\n\n\n

Einer der wichtigsten Faktoren bei der Optimierung der Webperformance ist die Wahl des richtigen Web Development Stacks. Beliebte Optionen wie MEAN, MERN oder LAMP bieten eine Vielzahl von Tools und Technologien, die es Entwicklern erm\u00f6glichen, schnelle und effiziente Websites zu erstellen. Die Wahl des richtigen Stacks h\u00e4ngt jedoch von den Anforderungen des Projekts und den F\u00e4higkeiten des Entwicklers ab. Ein zunehmend beliebter Entwicklungs-Stack, der jedoch bereits aus den Urspr\u00fcngen des Web-Developments stammt ist der sogenannte \u201cJam-Stack\u201d.<\/p>\n\n\n\n

Was ist der JAMStack?<\/strong><\/h2>\n\n\n\n

Der JAM-Stack (J<\/strong>avaScript, A<\/strong>PIs, M<\/strong>arkup) ist fundamental gesehen eine Philosophie, eine Denkweise oder eine Vorgehensweise. Im Vergleich zu traditionellen Web-Entwicklungs-Stacks, wie zum Beispiel dem MEAN- oder MERN-Stack (M<\/strong>ongoDB, E<\/strong>xpress, A<\/strong>ngular\/R<\/strong>eact, N<\/strong>ode), oder dem LAMP-Stack (L<\/strong>inux, A<\/strong>pache, M<\/strong>ySQL, P<\/strong>HP) schreibt der JAM-Stack keine spezifischen Technologien vor. Stattdessen greift es auf die Grundlagen von Web-Entwicklung zur\u00fcck: Vorgefertigte HTML-Dokumente und das Hosten dieses HTMLs auf eine Weise, die nicht ein gro\u00dfes Investment in eine umfangreiche Infrastruktur voraussetzt. In den meisten F\u00e4llen bedeutet letzteres, dass ein CDN f\u00fcr das Hosten der Webseiten verantwortlich ist.<\/p>\n\n\n\n

Diese neue Art auf Web-Entwicklung zu blicken f\u00fchrt uns zu einem Paradigma, das den Anf\u00e4ngen der Web-Entwicklung sehr \u00e4hnlich sieht.<\/p>\n\n\n\n

\"\"<\/a>
Abbildung 1: Render-Prozess in traditionellen Web-Stacks<\/figcaption><\/figure>\n\n\n\n

Die obige Abbildung stellt den Prozess dar, welcher bei genannten traditionellen Ans\u00e4tzen (sei es der MEAN-\/MERN-Stack oder der LAMP-Stack) durchlaufen wird, wenn eine Ressource (beispielsweise eine Seite) angefragt wird. Zun\u00e4chst wird wird die Seite vom Client beim Server angefragt. Diese Seiten liegen jedoch nicht in fertiger Form auf dem Server bereit, sondern m\u00fcssen erst noch dynamisch generiert werden. Diese Aufgabe \u00fcbernimmt dabei irgend eine Engine. Vielleicht m\u00fcssen hierf\u00fcr auch noch Datenbank-Aufrufe get\u00e4tigt werden oder mit einem externen System kommuniziert werden. Dann werden die generierten Inhalte in eine Vorlage eingef\u00fcgt und der daraus entstehende HTML-Code wird an den Client zur\u00fcckgesendet. Weiterhin sind mehrere Caching-Schichten in diesem Prozess involviert, bevor die Inhalte schlussendlich den user erreichen.
Dieser komplette Prozess kann einige Zeit in Anspruch nehmen. Je nach Komplexit\u00e4t der Seite kann dieser Prozess zwischen ein paar Millisekunden bis hin zu mehreren Sekunden dauern. <\/p>\n\n\n\n

Die wichtige Erkenntnis, die daraus entsteht ist, dass die fertige Seite, die der Client am Ende empf\u00e4ngt nie in irgendeiner statischen Form existiert, aus welchem Grund das dynamische Zusammenstellen und das Hosten der Webseite eng miteinander verzahnt sind. <\/p>\n\n\n\n

Mit dem JAM-Stack sieht der Prozess anders aus. Zu dem Zeitpunkt, an dem eine Seite angefragt wird, existiert der fertige HTML Code bereits auf dem Server, beziehungsweise auf einem Knotenpunkt des CDNs. So kann die Seite sofort an den Client zur\u00fcckgeschickt werden, sobald die Anfrage eintrifft. Das einzige, was zeitlich gesehen zwischen der Anfrage und der Antwort des CDNs steht, ist die Netzwerkqualit\u00e4t des Nutzers und die Distanz zum n\u00e4chstgelegenen Knoten des CDNs.\u00a0<\/p>\n\n\n\n

\"\"<\/a>
Abbildung 2: Render-Prozess auf dem JAM-Stack <\/figcaption><\/figure>\n\n\n\n

Dies wird dadurch erm\u00f6glicht, dass die Website zu dem Zeitpunkt zusammengestellt und zu fertigen HTML-Code verarbeitet wird, an dem der Entwickler eine neue Version in das Source Control Management (SCM) hochl\u00e4dt, wie es in Abbildung 2 dargelegt wird.<\/p>\n\n\n\n

Vorteile von JAM-Stack<\/strong><\/h2>\n\n\n\n

Das im vorherigen Kapitel erl\u00e4uterte Paradigma hat gegen\u00fcber traditionellen Vorgehensweisen eine Vielzahl an Vorteilen:
<\/p>\n\n\n\n