Astro – Mit der Insellösung zur Lichtgeschwindigkeit

Astro stellt sich als „All-in-one Web Framework“ vor, das „designed for speed“ ist. Große Versprechen wie „Pull your content from anywhere“, „Deploy everywhere“ und „Use whatever frontend library you want“ prangen offensiv auf der Startseite. Eine eierlegende Wollmilchsau, die mal wieder durch das Dorf „JavaScript“ getrieben wird oder ein echter „paradigm shift“? Fragt man HoustonAI, eine KI auf GPT-3-Basis, die mit der gesamten Dokumentation zu Astro gefüttert wurde, welchem Zweck das Framework dient, kommt eine klare Aussage: „Content-focused sites such as blogs, marketing sites, portfolios, and more.“

Dieser Blogpost fasst die Erkenntnisse zusammen, die bei der Implementierung einer Astro-Seite herausgekommen sind. Das Projekt ist auf GitHub zu finden und wurde auf Vercel deployt.

Astro-Komponenten

Astro führt als Kernkonzept Astro-Komponenten ein, die die Basis eines jeden Projekts bilden. In Astro-Komponenten wird das HTML-Template der Seiten definiert und kann über Importe anderer Komponenten beliebig komplex verschachtelt werden. Dies ermöglicht bspw. die Wiederverwendung von UI-Elementen und ein Layouting. Die Syntax von Astro-Komponenten erinnert stark an MDX und erlaubt den Import von JavaScript-Bibliotheken sowie die Definition von Properties in der Kopfzeile der jeweiligen Komponente (siehe Beispiel unten). Durch Server-Side Generation (SSG) oder Server-Side Rendering (SSR), werden die Astro-Komponenten letztlich zu statischem HTML verarbeitet und an den Browser des Nutzenden geschickt. Hierbei wird jegliches JavaScript, sofern nicht anders gekennzeichnet, von Astro entfernt.

1---
2import CounterVue from '../components/CounterVue.vue';
3import Card from '../components/Card.tsx';
4
5import LayoutWithNav from '../layouts/LayoutWithNav.astro';
6---
7<LayoutWithNav title="Astro | Dynamic Islands">
8    <div class="m-4 mt-96 grid gap-4">
9        <div class="text-center">
10            Scroll down to reveal!
11        </div>
12        <div class="mt-96" client:only="vue">
13            <Card>
14                <CounterVue client:visible>
15                    <h1>Hello from Vue! I am lazy loaded!</h1>
16                </CounterVue>
17            </Card>
18        </div>
19    </div>
20</Layout>

Your content, your way

Da Astro-Komponenten JavaScript-Bibliotheken importieren und diese im Markup verwendet werden können, sind der Fantasie eigenen Inhalt zu verarbeiten wenig Grenzen gesetzt: So kann über fetch beliebiger Inhalt heruntergeladen werden. Dabei spielt es keine Rolle, ob ein Headless CMS, eine beliebige API oder Markdown herangezogen wird, da die abgerufene Antwort über weitere Bibliotheken verarbeitet und letztlich an das HTML-Template übergeben werden kann. Das folgende Beispiel zeigt dies anhand einer Markdown-Datei, welche von GitHub abgerufen und über die Bibliothek marked in HTML gewandelt wird.

1---
2import LayoutWithNav from '../layouts/LayoutWithNav.astro';
3
4import { marked } from 'marked';
5const response = await fetch('https://raw.githubusercontent.com/wiki/adam-p/markdown-here/Markdown-Cheatsheet.md');
6const markdown = await response.text();
7const content = marked.parse(markdown);
8---
9<LayoutWithNav title="Remote markdown">
10    <article set:html={content} style="margin: 1rem" class="prose" />
11</LayoutWithNav>

Eine Insellösung: designed for speed, fast-by-default

Das Laden und Rendern von Inhalten stellt jedoch noch kein Alleinstellungsmerkmal dar und Astro steht bekannten Static-Side Generatoren wie Gatsby, Hexo oder Hugo in dieser Hinsicht in nichts nach. Was hingegen ein Novum ist, wird von Astro „Islands“ getauft: Astro Islands baut auf das Konzept der „islands archichtecture“ auf und erlaubt es, UI-Komponenten jeglicher Art (React, Vue, Svelte, ...) auf einer Seite zu verwenden. So können bspw. der Header, Footer, die Sidebar und der Hauptinhaltsbereich einer Seite als Inseln betrachtet, die jeweils statisch oder interaktiv gerendert werden. Damit die jeweilige Komponente „hydrated“ wird, also mit JavaScript angereichter und interaktiv gemacht wird, reicht in Astro das Setzen eines Attributs: Im Falle einer React-Komponente ist das client:only="react", für Vue hingegen client:only="vue". Soll eine Komponente erst geladen werden, wenn diese sichtbar wird, dann ist dies mit client:visible getan.

Astro hat also eine „static-by-default“-Strategie und es wird die Annahme verfolgt, dass zunächst alle Komponenten statisch zu rendern sind. Erst durch das explizite Setzen der client directives werden Teile der Webseite (aka. Islands) zu dynamischen, interaktiven Elementen, die auf dem Client rendern.

1---
2import CounterReact from '../components/Counter.jsx';
3import CounterVue from '../components/CounterVue.vue';
4---
5<CounterReact client:only="react">
6    <h1>Hello from React! I am interactive!</h1>
7</CounterReact>
8<CounterVue client:only="vue" client:visible>
9    <h1>Hello from Vue! I am interactive!</h1>
10</CounterVue>

Deploy everywhere

Wir sind an dem Punkt angelangt, an dem wir verstanden haben, dass Astro dank seiner Komponenten sowie der Island-Architektur schnell und zuverlässig Inhalts-fokussierte Webseiten generieren kann, welche durch das „static-by-default“-Paradigma „blazing fast“ sind.

Als ein Framework, welches SSR erlaubt, stellt sich letztlich die Frage, wie und wo eine mit Astro entwickelte Seite deployt werden kann. Hierfür bietet Astro eine Vielzahl an Guides. Im Falle von Vercel reicht die Installation des @astrojs/vercel-Adapters sowie eine kleine Anpassung in der Astro-Konfiguration, um SSR mit Vercel zu ermöglichen.

Learning: Auch wenn GitHub Pages kein SSR unterstützen, kann eine rein statische Astro-Seite dort gehostet werden. Die Anleitung hierzu ist zwar gewohnt detailliert, dennoch sind wir über einen Aspekt gestolpert: Wenn die GitHub Pages als „Deploy from a branch“ konfiguriert sind, werden beim Push auf gh-pages alle Resourcen mit Jekyll geparst. Da Astro einen Ordner _astro erzeugt und Jekyll-Dateien und Order mit _ als erstes Zeichen im Namen ignoriert, kann die Seite nicht erfolgreich aufgerufen werden. Hierfür muss im root-Ordner des gh-pages-Branches eine leere Datei mit dem Namen .nojekyll angelegt werden, um das Bauen mit Jekyll zu unterbinden.

Fazit

Astro verspricht auf seiner Webseite eine Menge Dinge, die es zu prüfen galt. Durch die hohe Flexibilität durch die Astro-Komponenten sowie einer build-in Island-Architektur können diese Versprechen jedoch gehalten werden. Ein Blick auf den Netzwerk-Traffic im Browser zeigt, dass Astro einiges richtig macht und Entwickler:innen dabei hilft, den Fußabdruck einer Webseite stark zu reduzieren. Dadurch, dass jede Interaktivität explizit gekennzeichnet werden muss, wird man gezwungen sich konkret mit dem Sinn und Ziel einer Island zu beschäftigen und kommt nicht selten zu dem Schluss, dass eine rein statische Implementierung absolut zweckdienlich ist. Mit der Insellösung erreicht Astro also Lichtgeschwindigkeit. Zumindest fast.