AstroJS Framework: Content-heavy Seiten performant entwickeln

In der modernen Webentwicklung haben Developer unzählige Möglichkeiten, ihre Websites mit verschiedenen Web-Frameworks zu bauen. Neben etablierten Frontend Frameworks, wie NextJS, QwikJS oder Svelte reihen sich immer mehr Newcommer in die JavaScript Frameworks ein. In diesem Blogbeitrag geben wir Ihnen eine Einführung in Astro, ein auf Geschwindigkeit und Developer Experience ausgerichtetes Web-Framework.

Was macht Astro besonders?

Oftmals steht der Entwickler vor der Entscheidung, welches JavaScript Framework im Projekt eingesetzt werden soll. Dabei muss oft unterschieden werden, ob es sich um eine reine Website oder eine komplexe Web-Applikation handelt. Typischerweise greift der Entwickler nun auf ein Framework zurück, welches sehr bekannt, aber dafür auch oft mit Funktionen überladen ist, da bspw. NextJS eher für Web Applications als für Websites gedacht ist.

Component Islands - Struktur in der Entwicklung führt zu optimierten Websites

Eine Website besteht aus verschiedenen Bestandteilen, z.B. einer Navbar, einem Contentblock, einer Sidebar, Footer, Kontaktformular und so weiter. Viele solcher Elemente sind sehr statisch, z.B. ein Blogartikel. Außer Links und Bildern finden sich selten Elemente, die interaktiv sind und JavaScript benötigen.

Auf der anderen Seite kann auf einer Unternehmensseite ein Slider mit Referenzen die Interaktivität auf der Website fördern. Solche Components benötigen JavaScript, damit sie animiert werden und der Besucher die Möglichkeit hat, selbst durch die Einträge zu navigieren. Ein JS Framework wie React kann einem Web Developer hier die Webentwicklung vereinfachen, sorgt allerdings auch durch die erhöhte Bundelsize für längere Ladezeiten. Astro splittet hier den Code so auf, dass statische Components immer ohne JavaScript auskommen und Components, welche mit Frameworks wie React, VueJS oder Svelte gebaut wurden, nur das nötige JavaScript an den Besucher senden.

Server-side first - Generierung auf dem Server ohne JavaScript Overhead

Wenn ein Besucher eine Website mit reaktiven Elementen, wie z.B. einem Slider lädt, muss ein Frontend Framework die Seite hydrieren, also mithilfe der geladene Runtime die Elemente durch JavaScript interaktiv machen. Bei populären Frontend Frameworks werden allerdings auch statische Inhalte, wie Texte in einem Blogartikel hydriert, denn die Runtime weiß nicht, ob sich der Text nicht auch ändern könnte. Astro verhindert dies, indem standardmäßig alles auf dem Server gerendert wird, auch Components, welche mit React, Vue und einem anderen Framework gebaut wurden. Erst, wenn der Entwickler explizit angibt, dass dieses Component interaktiv sein soll, wird das JavaScript an den Besucher geladen. Das spiegelt sich auch in Ladezeiten wider. Bei einem Rewrite seines Blogs von NextJS auf Astro hat Theo Browne 94% Javascript eingespart.

Freie Wahl beim Frontend Framework

Weiterhin ermöglicht Astro durch seine Integrations den Einsatz von anderen Frameworks für die Entwicklung von Components. Man kann also in Astro neben den eigenen Astro Components auch React, Svelte, Vue, SolidJS und einige andere Frameworks einsetzen. Dabei sorgt Astro durch seine Dynamic Island-Architektur, dass nur reaktive Components hydriert (mit JavaScript client side angereichert) werden. Das führt zu einer kleinen Bundle Size und dadurch zu einer verbesserten User Experience.

Statisches Hosting, Cloud Hosting, Edge Hosting

Außerdem kann der Web Developer frei wählen, wie er die Website deployen möchte. Er kann sie statisch generieren und sehr günstig über Web Hoster veröffentlichen oder er nutzt verschiedene Möglichkeiten, die Website traditionell als NodeJS Site oder auch severless über zB Cloudflare verfügbar zu machen. Sie sehen, Astro ist ein sehr flexibles und entwicklerfreundliches Tool um Kundenprojekte innerhalb kürzester Zeit umzusetzen.

Wie kann die Developer Experience von Astro profitieren?

Viele Frameworks stellen einen Entwickler zu Beginn immer vor die gleichen Probleme. Wie sieht die Syntax aus? Welche Libraries kann ich verwenden? Wie kann ich Datenbanken mit einer API anbinden? Wie werden meine Page Applications optimiert? Oft muss dann erstmal recherchiert werden. Astro bietet durch seine offene Gestaltung eine gute Lösung, um Developers ihre favorisierten Tools nutzen zu lassen.

Das Ziel von Astro ist es, den Developers möglichst wenig im Weg zu stehen. Deswegen ist dieses Web-Framework so offen gestaltet, dass verschieden Libraries eingebunden werden können, um so mit bekannten JavaScript Frameworks arbeiten zu können. So muss man sich für die Entwicklung von Components nichts neues aneignen, sondern kann gleich mit seinen Tools arbeiten.

Ebenso ist das JavaScript Framework sehr lightweight gebaut. Mit Vite als Bundler und maximaler Kompatibilität zu alternativen JavaScript Runtimes wie Bun macht sich die Build Time von Astro kaum bemerkbar. So kann sich der Developer ganz auf sein Web Development konzentrieren, ohne auf das Fertigbauen der Webanwendungen warten zu müssen.

Da Astro sich auf Websites mit viel Content spezialisiert, werden einem hier smarte Tools an die Hand gegeben. Astro bietet von Haus aus Unterstützung für Markdown, mit MDX können sogar Components aus einem anderen JS-Framework in diese Files eingebunden werden. Mit Hilfe von Content Collections hat der Developer eine einfache Möglichkeit, die Metadaten und Inhalte des Contents im JavaScript zu verwenden. Weitere Möglichkeiten werden mit API-Endpoints und speziellen Integrations gegeben.

Schon während dem Init eines Project wird dem Webentwickler Houston vorgestellt. Das Maskottchen begleitet einen durch den Initialisierungsprozess und ist seelischer Beistand, sollte es doch mal zu einem Fehler kommen. Die ansprechend gestaltete Errorpage bietet sofort auf den ersten Blick wichtige Informationen, wo im JavaScript der Fehler auftritt.

Als Webentwickler können Sie mit Astro auf smarte Tools zurückgreifen, welche Sie in ihrer Arbeit unterstützen und eine schnelle Entwicklung ermöglichen. Davon profitieren Kunde, Websitebesucher und Sie.

Wie verbessert Astro die SEO-Werte?

SEO ist aus einer modernen Webentwicklung nicht mehr wegzudenken. Ohne Search Engine Optimization kann die Website noch so gut gestaltet oder der Content noch so bedacht aufgebaut sein, sichtbar ist die Seite nicht. Oft ist das Problem auf der technischen Seite ein unsauberer Aufbau des Codes oder unnötiges JavaScript, welches vom Server an den Client übertragen wird.

Websites werden von modernen JavaScript Frameworks häufig zweimal gerendert, einmal server side und einmal im Browser. Das erzeugt unnötigen Workload, vor allem wenn eine Seite überwiegend aus statischem Content besteht. Unter den Frontend Frameworks gehört Astro zu den Static Side Buildern, also Frameworks, welche die Seiten im Vornherein generieren. Das bedeutet, dass die Website vom JS-Framework fertig gebaut und danach auf einem traditionellen Webspace oder CDN deployed wird. Das sorgt für eine schnelle aber gleichzeitig auch optimierte Ladezeit. Ebenso können durch einen solchen Betrieb Kosten eingespart werden. Allerdings erfordert jede Änderung, dass die Seite neu gebaut werden muss. Astro bietet allerdings ebenso die Möglichkeit, eine Website server side rendered anzubieten. So werden HTML, CSS, JS und weitere Assets erst generiert, wenn der Benutzer die Seite aufruft. Anders als beim Client Side Rendering hilft dies dem SEO-Ranking, da der HTML-Code bei Crawlern direkt ausgeliefert wird und nicht erst durch ein Framework gebaut werden muss. Gleichzeitig erlangen Developers bei ihren Web-Apps die Möglichkeit, Seiten dynamisch zu generieren. So kann z.B. ein Kundenbereich abhängig von einem Session-Cookie geladen oder der Nutzer zu einer Login Page umgeleitet werden. Astro verbindet also die Idee eines klassischen Static Side Generators mit den Vorzügen einer SSR Web Applikation.

Das große Ökosystem von Astro beinhaltet unter anderem smarte SEO-Plugins oder Plugins, die das Ranking positiv beeinflussen können. Astro SEO z.B. stellt ein Component bereit, mit welchem Developers typische Meta-, OpenGraph- und Twitter-Attribute in eine Seite einfügen können. 

Wenn Du mehr zum Thema Suchmaschinenmarketing erfahren willst, dann schau hier vorbei: Suchmaschinenmarketing der Ambitive Digitalagentur.

Wie können Entwickler mit Astro starten?

Damit Webentwickler einen besseren Überblick über die Funktion von Astro bekommen, folgen hier einige Grundlagen.

Installation und Ersteinrichtung

Ein Astro-Projekt zu starten ist sehr einfach. und hat kaum Anforderungen Die Developer des Frameworks bieten hierfür einen Assistenten an, mit dem ein Projekt initialisiert werden kann.

npm create astro@latest

Sofern noch nicht installiert wird der Einrichtungsassistent heruntergeladen und ausgeführt. Zuerst wird der Pfad des Projektes angegeben. Danach kann ausgewählt werden, ob das JavaScript Framework einige Beispieldateien installiert. Sofern man direkt mit dem Projekt starten möchte, sollten auch die Dependencies installiert werden. Ebenso hat der Entwickler die Möglichkeit, das Projekt als klassische JavaScript- oder Typescript-Webentwicklung zu starten.

Die ersten Schritte im Development

Wie in anderen Frameworks üblich, kann man mit dem Befehl

npm run dev

den Development Server starten. Standardmäßig ist nun unter Port 3000 die Webentwicklung zu sehen. Wenn man das Beispielprojekt in der Einrichtung ausgewählt hat, sieht man nun eine einfache Seite mit ein bisschen Text und Cards.

Um die Nutzung von Astro besser zu verstehen, sollte man sich die Ordnerstruktur im Projektordner anschauen. Im Beispiel ist die index.astro die Seite mit der höchsten Rangordnung. Mit dieser wird die grundlegende Struktur der Seite festgelegt. Weiterhin wird das Layout aus der Layout.astro genutzt, um den Aufbau weiter zu strukturieren. Die einzelnen Cards werden mit dynamischem Content aus der Card.astro wie eine Vorlage generiert.

Das Astro Component - JSX ohne JavaScript

Astro bietet neben verschiedenen UI-Frameworks auch ein eigenes Component an. Ein auf .astro endendes Component hat den Vorteil, dass es zum einen große Ähnlichkeiten zu JSX aufweist und somit für viele Webentwickler vertraut vorkommt. Zum anderen wird mit einem Astro Component kein JavaScript erzeugt, was dazu führt, dass das Component client side viel schneller lädt.

Das im Demo-Projekt vorhandene Component Card.astro sieht so aus:

---
export interface Props {
	title: string;
	body: string;
	href: string;
}

const { href, title, body } = Astro.props;
---


			{title}
			→
			{body}
		
	

Direkt zu Beginn fällt auf, dass ein Astro Component anders als klassisches HTML einen sog. Frontmatter bietet. In diesem Frontmatter kann JavaScript, welches zur Buildtime benötigt wird, geschrieben werden. In diesem Beispiel werden die Props des Components, welche in der index.astro festgelegt werden, in das Component übergeben. Ein anderer Anwendungsfall wäre z.B. ein fetch-Request oder das Importieren weiterer Components. Wichtig: Dieses JavaScript wird nicht im Client ausgeführt. Danach wird HTML in der JSX-Syntax geschrieben. Diese Syntax kennt man aus anderen Frameworks wie React. Da ein Astro Component per Definition kein JavaScript erzeugt, kann man hier allerdings keine Reaktivität einbauen (z.B. eine onClick-Funktion). Nur, was während der Buildtime ausgeführt werden kann (z.B. eine map-Function) kann in JSX geschrieben werden. Wenn man client side JavaScript ausführen möchte, kann man entweder einen script-Tag oder ein anderes UI-Framework wie React nutzen. Um UI Components zu stylen nutzen Webentwickler in einem Astro-Projekt klassisches CSS. Der Compiler ist allerdings so optimiert, dass CSS-Styles standardmäßig in das Component gescoped werden, also nur geladen werden, wenn das Component auch benutzt wird. Dies sorgt für einen großen Performanceboost im Gegensatz zu z.B. WordPress Themes.

Building und Deployment

Wenn man mit Astro Webseiten veröffentlichen möchte, muss man sich zunächst entscheiden, ob die Seite statisch gebaut oder als Server side rendered Application auf einem Server oder in einer Edge-Umgebung betrieben werden soll. Standardmäßig ist Astro ein Static Site Builder, baut also aus den vorhandenen Dateien statisches HTML, CSS und Javascript. Mit dem simplen Befehl

npm run build

baut Astro im dist-Folder die statischen Files, fertig für den Upload auf einen Webspace oder auf ein CDN. Allerdings muss man hier auf bestimmte Sachen achten. Routen müssen fest definiert sein, da sie zu einem späteren Zeitpunkt nicht dynamisch generiert werden können (bspw. ein Blog, welcher seine Beiträge über eine API abruft, siehe auch getStaticPaths()).

Wenn man die Seitenstruktur so dynamisch wie möglich halten möchte, macht es Sinn, die Seite als NodeJS oder serverless Application zu bauen. Hierfür muss zunächst die Wahl über die Zielplattform getroffen werden. Neben Node bietet Astro auch Adapter für Vercel, Netlify, AWS und einige andere mehr. Die meisten Adapter können bequem über astro add hinzugefügt werden. Für NodeJS muss man z.B. nur

npx astro add node

ausführen. Astro installiert automatisch alle benötigten Packages und richtet diese ein. Nun kann man mit

npm run build

die Generierung des benötigten Codes anstoßen. Nach dem Fertigbauen kann die entry.mjs im server-Ordner ausgeführt werden, um die Astroseite verfügbar zu machen. Der letzte Schritt ist dann, die Files z.B. in ein Dockerimage zu packen und auf einem Server zu deployen.

Fazit: Ist Astro ein JavaScript Framework, welches ich in meine Entwicklung einführen sollte?

Astro ermöglicht es, mit wenig Aufwand Seiten zu entwickeln, die sehr viel Content beinhalten. Das können u.a. Landingpages, Blogs, Dokumentationen o.ä. sein. Die Inhalte können entweder statisch mit z.B. Markdown-Files oder mit einer API von Datenbanken abgerufen werden. Dank der statischen Generierung in HTML, CSS und JS können Projekte sehr kostengünstig auf einem klassischen Webspace gehostet werden. Ein Browser muss nicht erst aufgeblähtes JavaScript kompilieren und eine Seite auf dem Client rendern, sondern sie ist bereits, wie eine klassische HTML-Seite fertig generiert. Das spiegelt sich vor allem in einem hohen PageSpeed-Score wider. Bestehende Seiten können dank der hohen Vielfalt an Framework-Integrations auf Astro portiert werden und mit weiteren Integrations wie TailwindCSS, Critters und Astro-Image Tools in ihrer Funktionalität erweitert und optimiert werden. Entwickler können ihr vertrautes UI-Framework nutzen ohne unnötiges Javascript zu generieren. Weiterhin besteht volle Flexibilität bei der Generierung von dynamischen Seiten, indem ein Astro-Projekt auch als Programm auf einem Server ausgeführt werden kann.

Vermeiden sollte man Astro bei sehr reaktiven oder komplexen Anwendungen wie Dashboards. Bei solchen Projekten punkten Fullstack-Frameworks wie NextJS oder SvelteKit durch eine solide Server-Client-Architektur in der Developer und User Experience. Oftmals sind solche Webanwendungen eine Single Page Application, da diese auch über mehrere Seiten hinweg States wie eine Usersession oder Filter für eine Anzeige ermöglichen. Außerdem wird NextJS in vielen Enterprise Projekten bereits erfolgreich eingesetzt und profitiert von diesen Erfahrungen.

FAQs zum Thema: Astro als performantes Framework

Was ist Astro?

Astro ist ein JavaScript Framework, welches die Entwicklung von schnellen und auf Content spezialisierte Websites unterstützt. Dabei legt das Framework Wert auf eine einfache und vertraute Entwicklung, zeitgleich wird eine maximale Flexibilität bei der Wahl des UI-Frameworks gewährleistet.

Wofür nutzt man Astro?

Astro eignet sich vor allem für klassische Multi Page Websites, welche einen überwiegend statischen Aufbau haben, bei welchen nicht in kurzer Zeit viele Rerenders ausgeführt werden müssen. Das können z.B. Landing-Pages. Blogs, Websites mit einem abgegrenzten Mitgliederbereich oder Dokumentationen sein. Dashboards oder komplexe Webapps können zwar auch mit Astro umgesetzt werden, allerdings bieten andere Frameworks mehr Funktionen, um solche Projekte in einer angemessenen Zeit umzusetzen.

Wie erreicht Astro einen hohen Pagespeed?

Astro arbeitet nach dem Motto "Zero JavaScript". Komponenten werden in Astro unabhängig vom Framework statisch generiert und nur auf expliziten Entwicklerwunsch hydriert, also mit JavaScript versehen. Das sorgt für eine geringe Bundlesize, der Browser muss entsprechend weniger JavaScript kompilieren und dadurch wird die Ladezeit reduziert. Mit optionalen Performance Integrations können weiterhin Bilder optimiert oder CSS-Code minified werden.

Nutzt Ihr als Agentur Astro als JavaScript Framework für Eure Websites?

Wir setzen auf das performante Framework QwikJS. Dieses betreibt auch unser selbst entwickeltes Ambitive CMS. Unser Team besitzt allerdings fundierte Astro-Kenntnisse und unterstützt Sie gerne bei Ihrem Projekt oder einer Migrierung.

Es wurde jetzt immer von statischen Inhalten gesprochen. Kann Astro auch dynamische Inhalte von z.B. einem CMS abrufen?

Ja, Astro unterstützt auch Server Side Rendering auf verschiedensten Plattformen. An jeder Stelle kann ein fetch-Request durchgeführt werden, welcher z.B. im JSON-Format Inhalte an die Komponente weitergibt. Die Performance kann dann mit Caching-Headern weiter optimiert werden.