Wat is Astro
Astro web framework voor content gedreven websites.
React vindt zichzelf een view library (Je kan hier echter je vraagtekens bij zetten) maar Astro maakt hier graag gebruik van, je kan React dan gebruiken als template taal, en als manier om toch interactiviteit toe te voegen aan je site.
Op deze manier kan je React dan gebruiken om content gedreven websites mee te maken. Voor SPA's is Astro minder geschikt.
Astro zijn router
In Astro denk je in pages / pagina's, je krijgt dan ook een pages directory die je vervolgens kan vullen met directories en index.astro bestanden. Je zou dit een file based router kunnen Next.js kunnen noemen.
Maak je dus de volgende file aan /pages/over/index.astro, dan maak je in essentie een "over" pagina aan die te vinden is op /over. Vervolgens kan je de .astro dan vullen met HTML:
<html lang="nl">
<head>
<title>Over</title>
</head>
<body>
<h1>Welkom op Maarten zijn site!</h1>
</body>
</html>Het is echter ook mogelijk om Markdown te gebruiken, en zelfs met een plugin MDX.
Astro support ook het genereren van collecties aan paginas. Denk bijvoorbeeld aan /pokemon/bulbasaur en /pokemon/mewtwo. Stel je maakt een bestand /pages/pokemon/[name].astro en je zet het volgende in het bestand:
---
export async function getStaticPaths() {
const pokemonNames = await getAllPokemonNamesFromDatabase();
return pokemonNames.map(pokemon =>
({ params: { pokemon }})
);
}
const { pokemon } = Astro.params;
---
<h1>{pokemon}</h1>Astro zal nu de getStaticPaths functie aanroepen een pagina genereren per pokemon in de database. In andere woorden een statisch HTML bestand per pokemon.
De pokemon kunnen uit een database komen, maar dus ook even makkelijk uit een CMS (Content Management Systeem) zoals bijvoorbeeld WordPress.
SSG en ISR
In Astro is content koning, en daarom is alles in Astro ook gericht op content. Astro houd zich dan ook bezig met de vraag: hoe zorg je dat de content het snelst naar de eindgebruiker komt?
Het antwoord is SSG (Static Site Generation), bij SSG trek je build time je hele CMS leeg (bijvoorbeeld WordPress) of je database, en genereer je alle pagina's van je website als statische HTML bestanden.
Het serveren van statische HTML vereist op je server geen programmeer taal als runtime. Je hebt geen PHP / JavaScript / C# nodig bij elke pagina. Hierdoor zijn de pagina's extreem snel te serveren.
Wanneer je CMS / je database dan wijzigt dan dien je de website opnieuw te bouwen / builden / compilen. Dit kan met grote sites lang duren, daarop is het Incremental Static Regeneration (ISR) model verzonnen. Je bouwt dan slechts een klein deel van de website opnieuw, en alleen wanneer die specifieke content is veranderd.
ISR vereist dan wel dat je Astro ook op een server laat runnen. Je hebt dan wel een JavaScript runtime zoals Node.js nodig op je server. Run je Astro met een server dan kan je ook dynamische content tonen! Denk bijvoorbeeld aan een comment section.
Islands Architecture
Maar wat als je toch iets interactiefs op je site wilt zetten? Het antwoord van Astro is de "Islands Architecture" vrij vertaald de eilanden architectuur.
Het idee is simpel: in een zee van statische content het toch mogelijk maken om eilandjes aan dynamiek toe te voegen. Op deze eilanden kan je lekker met client side JavaScript, of met React aan de slag. En zo toch interactiviteit toevoegen.
Qua structuur ziet dit er dan zo uit:
- Statische HTML
- Island / Eiland.
Framework Agnostisch
Astro is niet keihard verbonden aan React! Je mag je eigen favoriete front-end framework aan Astro verbinden. Dit noemt men ook wel "Framework Agnostic" zijn in het Engels.
Aangezien React dus maar één van vele is binnen Astro maakt het de React integratie in mijn beleving wel iets minder zoals bijvoorbeeld een Next.js.
Je kan dus React gebruiken als template taal binnen Astro, maar ook om het stukje interactieve eiland mee te maken. Gebruik je geen eilanden maar wel React dan schiet je dus nul JavaScript over de lijn!
Wat vindt Maarten?
Astro is een webframework gericht op content gedreven websites. Het is daar dan ook verschikkelijk goed in.
Dat gezegd hebbende is React is bij Astro een integratie, en niet zoals bij Next.js een integraal aspect van het framework.
Contact
Neem contact op via e-mail, phone of app, als je vragen hebt of een offerte wilt aanvragen.