Astro-rammeverket guide på norsk — bygg superraske nettsider

Hva er Astro og hvorfor er det unikt?

Astro er et moderne static site generator (SSG)-rammeverk som ble lansert i 2022 og raskt vant popularitet blant webutviklere verden over. Det unike med Astro er at det sender null JavaScript til nettleseren som standard — siden serveres som ren HTML og CSS, noe som gir enestående ytelse og Lighthouse-score.

Der andre rammeverk som Next.js og Nuxt alltid hydrerer hele siden i nettleseren, bruker Astro en tilnærming kalt Islands Architecture (øy-arkitektur). Bare de komponentene som faktisk trenger interaktivitet hyderes. Resultatet er lynraske sider som laster på millisekunder — selv på saktere mobilnett.

Islands Architecture forklart

Øy-arkitekturen er Astros viktigste innovasjon. Tenk deg nettsiden som et hav av statisk HTML med isolerte "øyer" av interaktivitet. En header med søkefelt er én øy, en karussel med produktbilder er en annen, mens resten av siden er statisk HTML som aldri trenger JavaScript.

I praksis markerer du interaktive komponenter med direktiver som client:load, client:idle eller client:visible. client:visible er spesielt smart — komponenten hyderes først når den scrolles inn i visningsfeltet, noe som dramatisk forbedrer initial lastetid for lange sider.

Bruk React, Vue og Svelte side om side

Astros mest imponerende funksjon er støtten for å blande rammeverk i samme prosjekt:

• React-komponenter kan importeres og brukes direkte i .astro-filer med client:load for interaktivitet.
• Vue 3-komponenter fungerer akkurat på samme måte — ideelt hvis teamet ditt allerede kan Vue.
• Svelte-komponenter integreres sømløst og bidrar med ekstra liten bundle-størrelse.
• Solid.js støttes for utviklere som vil ha React-lignende syntax med Svelte-lignende ytelse.
• Preact er et lettvektsalternativ til React som fungerer perfekt i Astro-prosjekter.
• .astro-filer er Astros egne komponenter — de kompileres til HTML og sender aldri JavaScript.

Kom i gang på fem minutter

Opprett et nytt Astro-prosjekt med: npm create astro@latest. Wizard-en vil guide deg gjennom valg av template (tom, blog, portfolio, dokumentasjon), TypeScript-oppsett og pakkebehandler. Prosjektet er klart på under et minutt.

Mappestrukturen er intuitiv: src/pages/ definerer URL-ruter via filnavn, src/components/ holder Astro- og rammeverkskomponenter, src/layouts/ inneholder gjenbrukbare sideoppsett, og public/ er for statiske eiendeler. Filer i src/pages/ kan være .astro, .md, .mdx, eller til og med .js/.ts for API-endepunkter.

Innhold og Markdown-støtte

Astro er bygget for innholdssider. Markdown og MDX støttes innebygd — bare legg .md-filer i src/pages/ og de blir automatisk til sider. Content Collections er Astros løsning for typesikre innholdssamlinger: definer et schema med Zod, og Astro garanterer at frontmatter-feltene er riktige ved bygging.

For blogger og dokumentasjonssider er dette svært kraftig. Du kan ha hundrevis av Markdown-filer, og Astro vil gi deg autocompletion og typefeil om et innlegg mangler et påkrevd felt. Kombinert med Starlight — Astros offisielle dokumentasjonstheme — kan du ha et profesjonelt dokumentasjonssted oppe på timer.

Ytelse i tall

Astro-sider presterer konsekvent bedre enn Next.js og Gatsby i uavhengige benchmarks:

Når bør du velge Astro?

Astro passer ypperlig for markedsføringssider, blogger, dokumentasjon, portfoliosider og innholdsdrevne nettsteder der SEO og lastehastighet er viktig. Hvis du bygger en applikasjon med mye brukerinteraksjon — som en dashboard, en sosial plattform eller et spill — er Next.js eller SvelteKit bedre valg.

For norske småbedrifter og frilansere er Astro et utmerket valg for bedriftsnettsider. Du kan bruke Tailwind CSS, integrere et Headless CMS som Sanity eller Contentful, og deploye gratis til Vercel eller Netlify. Resultatet er en blixt-rask side som rangerer høyt i Google uten ekstra SEO-arbeid.

Bransjestemmer om Astro

Astro har raskt blitt et av de mest populære verktøyene i frontend-verdenen.

"Vi migrerte bedriftssiden fra Gatsby til Astro og gikk fra 72 til 99 i Lighthouse Performance. Lastetiden gikk fra 3,2 til 0,6 sekunder. Det var den beste teknologibeslutningen vi tok i fjor."