21.7.2021 |

Astro - Erstelle schnellere Websites mit weniger client-seitigem JavaScript

Astro ist ein neuer Generator für statische Seiten, der mit dem JavaScript-Ökosystem arbeitet.

Astro setzt grundsätzlich auf das Ausliefern von Seiten ohne jegliches JavaScript im Brower. Dennoch erlaubt es dem Entwickler während des Erstellens server-seitig JavaScript zu nutzen.
So kann man z.B. Daten per JSON-Abfrage anfordern und dynamisch Seiten generieren.

Durch den Einsatz von modernen Technologien wie esbuild garantiert Astro eine gute Produktivät.

Gleichzeitig kann man mit Astro auch client-seitige Frameworks wie React.js oder Vue.js optional einbinden.

In der Ankündigung zu Astro werden die Vorteile wie folgt aufgelistet:

  • Bring Your Own Framework (BYOF): Build your site using React, Svelte, Vue, Preact, web components, or just plain ol’ HTML + JavaScript.
  • 100% Static HTML, No JS: Astro renders your entire page to static HTML, removing all JavaScript from your final build by default.
  • On-Demand Components: Need some JS? Astro can automatically hydrate interactive components when they become visible on the page. If the user never sees it, they never load it.
  • Fully-Featured: Astro supports TypeScript, Scoped CSS, CSS Modules, Sass, Tailwind, Markdown, MDX, and any of your favorite npm packages.
  • SEO Enabled: Automatic sitemaps, RSS feeds, pagination and collections take the pain out of SEO and syndication.

Astro setzt auf eine "Insel-Architektur", in welcher Komponenten als statische Platzhalter im Browser erscheinen und auf Wunsch mit JavaScript angereichert werden können.

drawing

(Quelle: Jason Miller)

Das Framework ist derzeit noch in der Beta-phase, so dass mit Änderungen zu rechnen ist. Einen Produktions-Einsatz sollte man daher sorgfältig abwägen.

Dennoch macht der Generator einen interessanten ersten Eindruck und könnte zukünftig Werkzeuge wie Hugo oder Gatsby in einigen Anwendungsbereichen ersetzen.

Zur Übersicht

Mehr vom Devsquad...

Rahmi Tufanoglu

Taiga UI a new Angular UI library

Jörg Herbst

Zugriff auf Bankdaten mit FinAPI