Astro

Az Astro a tartalomközpontú weboldalak keretrendszere: blogok, bemutatkozó oldalak, dokumentációk és termékoldalak készülnek vele. A lapokat alapértelmezés szerint a build alatt fordítja HTML-be, és a böngészőbe kerülő kimenetből elhagyja a JavaScriptet. Ez a szerverközpontú felépítés a klasszikus szerveroldali megoldások logikáját követi, csak nem kell hozzá második nyelvet tanulni: minden marad HTML, CSS és JavaScript, illetve TypeScript.

A projekt többoldalas alkalmazásként működik, nem egyetlen nagy kliensoldali csomagként. Az oldalváz és a tartalom a szerveren renderelődik, a böngésző pedig csak azt a kevés kódot kapja meg, amit kifejezetten interaktívvá tettünk.

Szigetek: interaktivitás csak ott, ahol kell

Egy Astro komponens alapértelmezés szerint HTML-re renderelődik, kliensoldali futtatókörnyezet nélkül, és a frontmatterben írt kód a kimenetből törlődik. Interaktív rész csak akkor keletkezik, ha egy komponenst kliens-szigetté teszünk a client:* direktívával, például client:load, client:idle vagy client:visible. A direktíva az ütemezést is megadja: a client:visible komponens csak akkor töltődik le, amikor a nézetbe kerül.

• A szigetek egymástól függetlenül hidratálódnak, ezért egy nagyobb komponens nem blokkolja a többit.
• Több UI keretrendszer használható ugyanazon az oldalon, ha a hozzájuk tartozó integráció telepítve van.
• Kiszolgálói szigetet a server:defer direktíva hoz létre, és ehhez már adapter kell.
• A client:* nélküli keretrendszer-komponensből csak HTML és CSS marad, a keretrendszer futtatókörnyezete nem kerül a lapra.

Tartalom és típusbiztonság

A tartalomgyűjtemény egy helyen tárolt, azonos szerkezetű bejegyzések összessége. A gyűjteményhez szükséges egy betöltő, amely a fájlokból vagy külső forrásból hozza az adatot, és választható egy séma, amely leírja az egyes bejegyzések várt alakját. Ez a szerkesztőben és a build során is kirajzolja a hiányzó vagy hibás mezőket, mielőtt az éles oldalra kerülnének.

• A build idején feldolgozott gyűjtemény a Markdown, MDX, YAML, TOML és JSON fájlokat ismeri, a tartalom pedig a build alatt kerül a kimenetbe.
• Az élő gyűjtemény kéréskor kérdez le egy forrást, ezért gyakran változó adathoz való; cserébe nincs benne MDX és képoptimalizálás, és minden kérésnél adatot hoz.
• Ez az oldal is így épül: a blog- és projektbejegyzések gyűjtemények, nyelvenként külön útvonalakkal, és a bejegyzések mezőit a séma ellenőrzi.
• Új tartalomtípus bevezetése annyi, mint egy mappa és egy séma hozzáadása, a listázó oldal pedig a gyűjtemény lekérdezéséből dolgozik.

Build és kimenet

Alapértelmezés szerint minden oldal előre renderelődik a build alatt, és a kimenet statikus fájlok halmaza. A kész könyvtár bármelyik statikus tárhelyről kiszolgálható, a fájlnevek pedig hash-t kapnak, így a gyorsítótár kezelése kiszámítható. Ez az oldal ugyanezt a modellt használja: statikus kimenet, amelyet a Linux szerverünkön futó nginx szolgál ki.

• A sitemap integráció a build során járja be az előre generált útvonalakat; dinamikus útvonalhoz kéréskori renderelés mellett nem készít bejegyzést.
• Kéréskori rendereléshez adapter kell a választott futtatókörnyezethez, és a export const prerender = false beállítással lehet egy-egy útvonalat kivenni az előre generálásból.
• Az egész oldal kiszolgálóoldali renderelése az output: 'server' beállítással érhető el, ott viszont a statikus oldalakat külön kell megjelölni.
• A build konténerben is lefuthat, nálunk ez a Docker alapú környezet része.

Amire figyelni kell

• A nulla JavaScript az alapértelmezés, nem garancia: minden client:* direktíva saját csomagot hoz a lapra, méghozzá a választott keretrendszer futtatókörnyezetével együtt.
• A kliensoldali interaktivitást kifejezetten kérni kell; ami nincs megjelölve, az a böngészőben nem fut le.
• A keretrendszer-integrációkat telepíteni és konfigurálni kell, a build pedig Node.js eszközláncot igényel.
• A kiszolgálói szigetek és a kéréskori renderelés adapterhez kötöttek, ezért a tárhely kiválasztásakor számolni kell a futtatókörnyezettel.
• A tartalom a build pillanatképéből kerül ki, így egy szerkesztés újraépítést igényel, kivéve ha élő gyűjteményt használunk.

Tovább olvasás

• Why Astro?
• Islands architecture
• Content collections

A CyberElectrónál a bemutatkozó oldalaink és ez az oldal is Astroval épül: a tartalom gyűjteményekben él, a kimenet statikus fájlokból áll, és a böngésző csak ott kap JavaScriptet, ahol a működéshez valóban kell.