Astro Islands en Práctica: HTML Estático con Interacciones Svelte Acotadas
Cómo este portfolio usa Astro para estructura estática y Svelte solo cuando la interacción, persistencia o estado local requieren hidratación.
Astro comienza con HTML estático. Un componente de framework se convierte en isla de cliente únicamente cuando la página elige explícitamente una directiva client:*. Esa frontera es útil porque vuelve visibles en el código el costo y el propósito de la hidratación.
Este portfolio aplica una regla simple: Astro controla estructura, contenido, rutas, metadata y markup renderizado; Svelte controla las interacciones que necesitan estado del navegador.
Astro para el Documento
Los layouts, enlaces de navegación, metadata SEO, Content Collections, artículos y el fallback semántico de home son componentes Astro. Producen HTML útil sin esperar JavaScript del cliente.
La ruta de proyectos carga datos versionados durante el build y entrega el resultado localizado a una sola isla interactiva:
---
const entries = await getCollection('projects');
const projects = entries.map((entry) => mapProjectEntry(entry, 'es'));
---
<StickerAlbum projects={projects} lang="es" client:load />La página no consulta una base de datos en runtime. Svelte recibe el dataset inicial completo y administra búsqueda, filtros, estado en la URL y anuncios de resultados en el navegador.
Svelte para Interacción Acotada
Svelte se usa en el shell retro, ventanas persistentes, diálogos accesibles, controles multimedia, filtros de proyectos y credenciales, y replays deterministas. Estas superficies necesitan estado local, eventos o limpieza de lifecycle.
La hidratación todavía debe justificarse:
client:loadse reserva para interacción disponible de inmediato.client:mediapuede evitar hidratar chrome exclusivo de escritorio en pantallas pequeñas.client:only="svelte"se limita a la simulación de escritorio que depende de APIs del navegador.- El contenido Astro estático permanece disponible cuando JavaScript está desactivado.
React No Es un Tercer Sistema de Presentación
El repositorio todavía conserva componentes aislados, iconos y paquetes runtime de una etapa con React, pero las páginas públicas actuales no hidratan una aplicación React ni un panel admin. La integración React de Astro se retiró después de auditar sus consumidores y el output generado; el source y los paquetes legados restantes requieren la misma evidencia antes de retirarse.
La distinción importa: conservar source o paquetes instalados no demuestra que el framework forme parte de la arquitectura activa de runtime.
Medir la Ruta Real
Las comparaciones genéricas entre frameworks no son un presupuesto de performance. El gate de calidad de Fase 5 mide HTML, JavaScript, CSS, imágenes, audio y assets opt-in de DOOM dentro del artefacto estático local. Las imágenes remotas tienen un límite separado de disponibilidad y 512 KiB. Un componente solo se optimiza después de confirmar su consumidor real.
La Decisión en una Frase
Usar Astro hasta que la interfaz requiera estado; hidratar la frontera Svelte más pequeña que resuelva esa interacción; conservar debajo un documento estático útil.
