Puente a Astro: la misma landing con 0 JS por defecto

Si Next envía JavaScript y optimiza, Astro va al extremo: por defecto envía CERO JavaScript. Tu landing se vuelve HTML puro y rapidísimo, y solo las piezas que de verdad necesitan interactividad se "encienden" como islas. Es la arquitectura ideal para sitios de contenido —blogs, documentación, landings— donde la velocidad manda. La misma landing, otra filosofía.

La revista impresa con pop-ups

Un componente .astro

La sintaxis es la más cercana a lo que ya sabes: HTML de siempre, con un bloque de "frontmatter" (entre ---) donde corre JavaScript en el BUILD:

---
// frontmatter: corre en el BUILD/servidor, NUNCA se envía al navegador
import Contador from "../components/Contador.jsx";
const noticias = await getNoticias();
---
<main>
<h1>El agua encuentra su cauce</h1>
{noticias.map((n) => <article>{n.titulo}</article>)}

<Contador client:visible />   <!-- ISLA: se hidrata solo al hacerse visible -->
</main>

Todo lo de arriba —el h1, las noticias— se renderiza a HTML estático en el build: el visitante recibe puro HTML, sin una línea de JS. El <Contador> es una ISLA: un componente interactivo (puede ser React, Vue, Svelte...) que solo se "enciende" según su directiva.

Las directivas de isla: tú decides cuándo se enciende

<Menu client:load />       <!-- se hidrata YA (interactividad inmediata) -->
<Galeria client:visible /> <!-- se hidrata cuando entra en pantalla -->
<Chat client:idle />       <!-- se hidrata cuando el navegador está libre -->
<Widget client:only="react" /> <!-- solo en cliente, nunca en el servidor -->

client:visible es el favorito: una galería interactiva abajo del todo no carga su JavaScript hasta que el usuario baja hasta ella. Astro te deja afinar el costo pieza por pieza — la mejora progresiva del módulo 8, llevada a su expresión máxima.

Cuándo elegir Astro

Mini-reto

Piensa tu "El Observador" como sitio Astro: ¿qué sería 100% estático (los artículos, la portada) y qué serían ISLAS? Lista las 2-3 piezas que necesitarían client:* (el buscador en vivo del módulo 14, un menú móvil, un tema oscuro) y qué directiva le pondrías a cada una (client:load para el menú, client:visible para algo abajo). Ese análisis es diseño de arquitectura Astro, y llegarás a su curso con la mentalidad lista.

Qué sigue

Viste React, Next y Astro —la familia del ecosistema React/HTML—. El siguiente puente cruza a otra gran familia: Angular, con su propio enfoque de componentes y su novedad estrella, las SIGNALS. Tu tarjeta, una vez más, pero con la reactividad de Angular 21.