Astro delante: 0 JavaScript por defecto

Un front headless puede ser cualquier cosa: React, Vue, Svelte, una app nativa… Pero para una web de contenido como esta, Astro es difícil de superar. Y hay un motivo técnico detrás, no es capricho.

La filosofía de las islas

Astro genera HTML estático por defecto y solo manda JavaScript a los trozos concretos que lo necesitan —un carrusel, un buscador—. El resto de la página pesa casi nada. A eso se le llama «arquitectura de islas»: mar de HTML rápido, con islitas de interactividad solo donde hacen falta.

El contenido, en el momento del build

En el frontmatter de cada página (lo que va entre las dos líneas de ---) pides los datos a WordPress. Ese código se ejecuta en el servidor, al compilar, no en el navegador del visitante:

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

El resultado es HTML plano que se sirve al instante desde una CDN. Como el contenido cambia poco, lo pedimos en el build: cuando publicas en WordPress, un webhook dispara una nueva compilación y en segundos está online.

El detalle que casi todos fallan: las fuentes

Aquí va un aprendizaje que salió midiendo este mismo sitio. Cargar las tipografías con un <link> a Google Fonts bloquea el renderizado: el navegador se para a buscarlas fuera antes de pintar. En una medición real, eso dejaba el LCP en 3,4 s y Lighthouse en 63. Un desastre.

¿La solución? Auto-alojar las fuentes, que viajen desde el mismo origen que el HTML:

npm install @fontsource-variable/fraunces
// y en el layout, en vez del <link> a Google:
import '@fontsource-variable/fraunces';

Cero peticiones externas. Con ese solo cambio, el rendimiento saltó de 63 a 100. Lo cuento entero en el capítulo de rendimiento.

Que lo monte tu agente

Crea el front en Astro siguiendo la skill wp-wow: un cliente
REST tipado en src/lib/wp.ts, la home pidiendo los datos en el build,
y fuentes auto-alojadas con Fontsource (nada de Google Fonts por link).

Ya tenemos cerebro y cara. Ahora, cómo estructurar el contenido para que dé más de sí.