# Astro: HTML first, JavaScript when you need it — Jad Joubran ## 🗂️ Triage — annotated highlights surfaced > [!note]- Cross Reference > - **Astro ships zero JavaScript unless you add it** — progressive enhancement becomes the default you'd have to opt out of; a platform-level default that beats site-level performance work. #xref > - **Astro's frontmatter runs on the server, not the client** — real `fetch`/`Response` primitives over framework state machinery; platform knowledge that outlasts any framework. #xref ## 🧭 Bib capsule Jad Joubran, "Astro: HTML first, JavaScript when you need it," jadjoubran.io, 2026. https://jadjoubran.io/blog/why-we-chose-astro ## 🧠 Author's thesis (Adler Q1+Q2) Joubran and Cyd Stumpel chose Astro for the API module of the HvA Web Design & Development minor because its architecture — server-executed frontmatter, a zero-JavaScript default, and an islands model for optional interactivity — mechanically reinforces the curriculum's stated values (web standards, progressive enhancement, accessibility, performance) rather than making students learn those values against the grain of the tool. In detail, students fetch data with real `fetch`/`Response` primitives instead of `useEffect`/loading-state boilerplate, progressive enhancement is the default instead of a discipline, and one tool scales from static pages to SSR to secret-key API endpoints — so the platform knowledge outlasts whatever framework is fashionable later. ## 🧩 Key arguments - A tool that forces a component model, JSX, and hydration before rendering a list spends a designer's limited attention on the framework, not the web. - `.astro` files are "HTML you sprinkle logic into" — the frontmatter fetches server-side, the template renders finished HTML, teaching platform primitives (`fetch`, `Response`, `navigator.geolocation`) directly. - Zero-JS-by-default plus islands makes progressive enhancement and solid Core Web Vitals emergent properties, not deliberate engineering — and the choice models "audit the tool against your stated values before adopting what's popular." ## 🗒️ Notes — Literature atoms ### Astro's frontmatter runs on the server, not the client > [!quote] > "code in the fence runs on the server, the template below it renders to HTML" - **Where**: "Server-side fetching in the frontmatter" section - **Why**: The mechanical reason students skip `useEffect`/loading-state — the fetch happens before the browser sees the page. ### Astro ships zero JavaScript unless you add it > [!quote] > "you don't opt into progressive enhancement; you'd have to opt out" - **Where**: "Progressive enhancement and islands" section - **Why**: Inverts the usual default — most frameworks require work to progressively enhance; Astro requires work to avoid it. ### Islands let one framework hydrate without adopting it everywhere > [!quote] > "a component that hydrates on its own while the rest of the page stays static HTML" - **Where**: Same section, defining "island" - **Why**: The mechanism that lets a course or project defer the "which JS framework" decision until a feature actually needs one. ## 🔖 Permanent candidates - Tool choice should reinforce stated values, not just convenience — When picking a tool for a team or curriculum, I check whether its defaults mechanically reinforce the values I already hold — not just whether it's fast to set up or currently popular. [no existing Permanent note by this handle — worth promoting] ## Links - [[Open Source Governance MOC]] — home MOC; extends the Platform-Level Defaults thread — Astro's zero-JS default is a framework-level version of "defaults dominate site-level optimization" - [[Platform-Level Defaults Beat Site-Level Optimization for the Same Audiences]] — Astro's zero-JS baseline and islands are the framework-side proof of this structural claim: good CWV falls out of the platform default, not per-site tuning - [[3. Resources/Readwise/Articles/Core Web Vitals WordPress and Astro Versus Everyone Else]] — the empirical CWV comparison this pedagogical case connects to; Astro's architecture as the "fast by default" reference point ## ✅ Processing checklist - [x] Claim atoms carried from deep-read analysis - [ ] Permanent candidates reviewed for promotion - [ ] Version History Diff check