Neuigkeiten von trion.
Immer gut informiert.

Astro bietet verschiedene Integrationsmöglichkeiten, mit denen sich das Framework erweitern lässt. Dazu gehören Adapter für Node.js, Cloudflare, Datenbanken und MDX-Dateien. Spannend ist, dass es auch Integrationen für verschiedene Frontend-Frameworks gibt. Diese können ganz einfach mit dem Befehl npx astro add (name of integration) installiert werden.

Dadurch können sich Entwickler direkt auf das Framework stürzen, das sie bereits kennen, oder sie können bereits fertige Komponenten mitbringen. Dadurch bietet Astro eine große Flexibilität und man ist nicht einmal auf ein Frontend-Framework beschränkt. Es können sogar mehrere Frontend-Frameworks integriert werden und in einer Astro-Komponente verschiedene Framework-Komponenten benutzt werden.

Astro nutzt sogenannte Content Collections, um den Inhalt einer Seite zu strukturieren. Eine Content Collection ist eine Gruppe von Daten, die von der Struktur her ähnlich aufgebaut sind. Beispielsweise kann es sich dabei um einen Ordner mit Blogbeiträgen handeln. Es werden verschiedene Formate standardmäßig unterstützt, darunter Markdown, MDX, Markdoc, YAML und JSON.

Mithilfe der Content Layer API von Astro können diese Content Collections definiert und abgefragt werden. Um eine Content Collection zu definieren, benötigt man einen Loader und optional ein Schema.

Der Loader ist dafür zuständig, die Daten bereitzustellen. Wenn die Daten nicht lokal liegen, können Third-Party- oder Community-Build-Loader verwendet werden. Du kannst auch deinen eigenen Loader schreiben, wenn du spezielle Anforderungen hast oder ein noch nicht unterstütztes Datenformat benötigst.

Das Schema ist optional, doch wenn du es angibst, gibt es einige Vorteile. Durch das Schema ist Astro in der Lage, automatisch ein TypeScript-Interface für deine Inhalte anzulegen. Dadurch hast du vollen TypeScript-Support, während du deine Collections abfragst, mit Autovervollständigung und Typsicherheit.

Die Islands-Architektur ist eine neuere Frontend-Architektur, bei der der Großteil der Website als schnelles statisches HTML bereitgestellt wird. Nur dort, wo Interaktionen benötigt werden, wird eine sogenannte „Island” erstellt, die das nötige JavaScript enthält. Dadurch wird das initiale, langsame Laden des gesamten JavaScripts vermieden.

Es gibt zwei Arten von Islands. Client-Islands sind interaktive UI-Komponenten, die separat von der restlichen Seite hydriert werden. Server-Islands sind UI-Komponenten, die ihren dynamischen Inhalt auf der Serverseite generieren und diesen darstellen, sobald er verfügbar ist.

Die Islands laufen zwar komplett unabhängig voneinander, können aber trotzdem Zustände teilen und miteinander kommunizieren. Dadurch, dass sie unabhängig sind, kann Astro mehrere UI-Frameworks gleichzeitig kombinieren.

Standardmäßig entfernt Astro jeglichen JavaScript-Code und stellt alle Komponenten als reines HTML und CSS dar. Um eine Komponente zu einer interaktiven Island zu machen, wird lediglich eine client:* oder für Server-Islands eine server:defer Richtlinie benötigt.

Ein Beispiel für eine Client-Island, die beim Laden der Website mitgeladen werden soll, ist:

Weitere Lademöglichkeiten für Client Islands wären client:idle, dann lädt die Komponente, wenn der Browser in den Idle-State geht. Außerdem gibt es noch die Option client:visible, bei der eine Komponente geladen wird, sobald sie in den Viewport kommt.

Ein weiterer Vorteil der Islands-Architektur besteht darin, dass alle Islands parallel laden. Eine langsame Image-Carousel-Komponente blockiert somit nicht die anderen. Komponente mit einer höheren Priorität, wie etwa der Header für die Navigation. Islands werden komplett separat hydriert.

Dieser Ansatz ermöglicht es, Astro-Seiteninhalte sofort bereitzustellen und sie dennoch mit dynamischen Inhalten zu kombinieren.

Astro ist darauf ausgelegt, statische Inhalte schnell bereitzustellen. Seiten wie Blogs oder Marketingseiten profitieren daher ganz besonders von Astro.

Astro verbessert auch die SEO deiner Seite. Da der Inhalt sofort verfügbar ist und nicht erst JavaScript ausgeführt werden muss, können Suchmaschinen die Keywords direkt herausfiltern. Dadurch erhalten Astro-Seiten bessere Rankings und deine Seite könnte ein höheres Engagement oder bessere Conversion Rates erzielen.

Zudem kann der Seiteninhalt problemlos über die Content-Layer-API mit einem Content-Management-System (CMS) verbunden werden. Der bereitgestellte Content des CMS kann dann direkt während der Build-Time in die Seite eingebunden werden. Durch die Astro Islands kann dennoch neuer Content problemlos nachgeladen werden.

Um mit Astro durchstarten zu können, benötigst du lediglich NodeJs und einen Code Editor deienr Wahl.

Mit dem Befehl npm create astro@latest wird ein neues Projekt Astro Projekt erstellt.

Mit dem Befehl npm run dev kann das Projekt im Development Modus mit Hot Reload gestartet werden.

Wenn du z.B. schon React erfahrung hast kannst du mit npx astro add react React support hinzufügen und direkt loslegen.