I den siste State of Frontend-undersøkelsen svarte hele 25 prosent at de har brukt Astro – et oppsiktsvekkende høyt tall siden rammeverket er bare et par år gammelt.
Tirsdag kveld norsk tid ble Astro 5.0 lansert, med en rekke nyheter som blant annet skal gjøre det enklere å hente innhold fra ulike datakilder, samt kombinere cachet statisk innhold med dynamisk innhold.
– Astro gir deg superkrefter! mener Stian, som svarer på alt vi lurer på
- For de som ikke kjenner til Astro fra før, så er det et rammeverk for å bygge innholdsdrevne nettsider som for eksempel markedsføringssider og blogger.
- Det er ganske lett å lære seg, siden mye er standard HTML, CSS og JavaScript/Typescript – med en del funksjonalitet lånt fra blant annet React (som JSX).
- Rammeverket fokuserer mye på å minimere mengden JavaScript ved å generere statiske sider på serveren – men med mulighet til å ha komponenter på siden som blir interaktive – såkalte Islands, eller øyer av interaktivitet.
- Og hvis du vil, kan du importere og bruke komponenter laget i React, Svelte, Vue eller andre rammeverk.
Mens rammeverk som Next.js er laget for å bygge komplekse web-applikasjoner, er Astro designet for å være spesielt bra til å lage raske nettsider med mye innhold.
Her er de viktigste nyhetene i versjon 5.0.
#1: Nytt Content Layer
Astro har helt fra versjon 2.0 hatt noe som heter Content Collections, som er en måte å organisere statisk innhold i typesikre samlinger.
I versjoner før versjon 5.0 har man kunnet ha en mappestruktur med for eksempel markdown-filer som man har kunnet hente innhold fra på en enkel måte. Du har selvfølgelig kunnet hente innholdet også fra et CMS, men det har ikke vært noen standard måte å gjøre det på innebygget i Astro.
I Astro 5.0 blir dette enklere.
– Etter hvert som nettsiden din vokser, kan det å ha innholdet ditt i markdown-filer i et Git-repo bli mindre praktisk, skriver Astro-teamet i lanseringsbloggposten.
Et nytt Content Layer-API skal gjøre det enklere og mer fleksibelt å hente innhold fra mange ulike kilder på en standardisert måte.
Det hele bygger videre på content collections, men introduserer i tillegg såkalte loaders som er funksjoner som henter og transformerer data fra ulike kilder og gjør dem tilgjengelige via det nye Content Layer-API-et:
Du kan bruke ulike typer loadere:
- Innebygde loaders kan brukes til å hente innhold fra disken (for eksempel fra markdown-, MDX- eller JSON-filer
- Du kan skrive dine egne loadere med noen få kodelinjer
- Eller du kan bruke tredjeparts loadere.
Når nettsiden bygges vil Astro hente innhold fra alle de ulike datakildene og cache dem, slik at du kan hente dataene fra én felles "data store" og bruke på de ulike sidene slik:
//src/pages/index.astro
---
import { getCollection } from 'astro:content';
const posts = await getCollection('blog');
---
<h1>My posts</h1>
<ul>
{posts.map(post => (
<li><a href={`/blog/${post.id}`}>{post.data.title}</a></li>
))}
</ul>#2: Server Islands
I Astro blir alt statiske HTML-sider uten interaktivitet, med mindre du definerer at du vil ha noe annet. Hvis du har behov for at en komponent skal være interaktiv i nettleseren, kan du slå på dette per komponent – det blir som små "øyer av interaktivitet". Det er dette Astro kaller Island Architecture.
I Astro 5.0 utvides dette konseptet til også gjelde serveren.
– Med Server Islands kan du kombinere statisk HTML med høy ytelse med dynamisk server-genererte komponenter på den samme siden, skriver Astro-teamet.
Det betyr at du på en hvilken som helst nettside kan ha:
- 100 % statisk innhold som aldri endrer seg
- Dynamisk innhold fra en database som endrer seg av og til, men oftere enn du deployer
- Personalisert innhold, tilpasset enkeltbrukere av nettsiden
Før versjon 5.0 måtte du velge én caching-strategi for alle disse typene med innhold, noe som betød at hvis det var en side for innloggede brukere var det vanligvis ingen caching i det hele tatt.
Med Server Islands kan du ha det beste fra begge verdener, skriver Astro-teamet, og illustrerer det slik:
Eksempler på hva du kan bruke det til kan være en nettside som stort sett er statisk og cachet, men der kanskje brukerens avatar, handlekurv eller noe annet er dynamisk oppdatert.
#3: Først med Vite 6?
Det er også en rekke andre oppdateringer i Astro 5, som du kan lese mer om i lanseringsbloggposten.
Vi nevner blant annet at Astro 5 er ett av de første rammeverkene som er ute med byggeverktøyet Vite 6, som ble lansert forrige uke.
Dette har ikke så veldig mye å si for deg som bruker Astro, men for de som lager rammeverkene og integrasjoner mot rammeverkene kan det ha litt å si.
Les mer om Vite 6 og hva som er nytt her:
