Astro out front: 0 JavaScript by default

A headless front end can be anything: React, Vue, Svelte, a native app… But for a content site like this one, Astro is hard to beat. And there’s a technical reason behind it, not a whim.

The islands philosophy

Astro generates static HTML by default and only ships JavaScript to the specific bits that need it — a carousel, a search box. The rest of the page weighs next to nothing. That’s what’s called «islands architecture»: a sea of fast HTML, with little islands of interactivity only where they’re needed.

The content, at build time

In the frontmatter of each page (what goes between the two --- lines) you ask WordPress for the data. That code runs on the server, at compile time, not in the visitor’s browser:

---
const res = await fetch(
  'http://your-site.local/wp-json/espectacular/v1/landing'
);
const { articles } = await res.json();
---
<section>
  {articles.map((a) => (
    <article><h3>{a.title}</h3></article>
  ))}
</section>

The result is plain HTML served instantly from a CDN. Since the content changes little, we ask for it at build time: when you publish in WordPress, a webhook fires a new compile and in seconds it’s online.

The detail almost everyone gets wrong: fonts

Here’s a lesson that came out of measuring this very site. Loading typefaces with a <link> to Google Fonts blocks rendering: the browser stops to fetch them from outside before it paints. In a real measurement, that left the LCP at 3.4 s and Lighthouse at 63. A disaster.

The fix? Self-host the fonts, so they travel from the same origin as the HTML:

npm install @fontsource-variable/fraunces
// and in the layout, instead of the <link> to Google:
import '@fontsource-variable/fraunces';

Zero external requests. With that one change alone, performance jumped from 63 to 100. I tell the whole story in the performance chapter.

Let your agent build it

Build the front end in Astro following the wp-wow skill: a typed
REST client in src/lib/wp.ts, the home page fetching the data at build time,
and self-hosted fonts with Fontsource (no Google Fonts by link).

Now we’ve got the brain and the face. Next, how to structure the content so it gives you more.