🏗️ Arquitectura y Enrutamiento

Generación estática, colecciones de contenido e islas de interactividad.

El HUB principal aprovecha la arquitectura en Astro para entregar un sitio web de carga casi instantánea mediante Generación Estática (SSG), integrando interactividad solo donde es estrictamente necesario mediante componentes de React.

​

🛣️ Enrutamiento Dinámico Estático (SSG)

Para generar las páginas individuales de cada caso de estudio (como el Motor Transaccional o el Pipeline), el portafolio utiliza las Content Collections de Astro.

El archivo [id].astro actúa como una plantilla maestra que lee los archivos Markdown de los proyectos durante el build o tiempo de compilación y genera rutas HTML estáticas. El algoritmo filtra dinámicamente el directorio para ignorar la carpeta de traducciones (idioma EN) y generar únicamente las rutas del idioma base (ES).

// Fragmento de pages/proyectos/[id].astro
export async function getStaticPaths() {
  const proyectos = await getCollection('proyectos', ({ id }) => {
    return !id.startsWith('en/'); // Ignora los archivos de la carpeta en/
  });
  
  return proyectos.map(proyecto => ({
    params: { id: proyecto.id },
    props: { proyecto },
  }));
}

​

🏝️ Islas de Interactividad (Astro Islands)

Para mantener la velocidad de un sitio estático pero añadir interactividad fluida, el HUB implementa la arquitectura de Islas de Astro. El HTML inicial se renderiza de forma estática en el servidor, y solo los componentes dinámicos se hidratan con JavaScript en el cliente mediante directivas de cliente.

​

⚡ Hidratación Selectiva con React

Los componentes como el selector de idiomas (HeroDual) y la matriz de filtros tecnológicos (TechMatrix) se cargan de forma interactiva utilizando la directiva client:load. Esto asegura que el JavaScript de React solo se descargue y ejecute para estos componentes específicos, manteniendo el resto de la página extremadamente ligera.

// Uso de islas reactivas en index.astro
---
import HeroDual from '../components/hub/HeroDual.jsx';
import TechMatrix from '../components/hub/TechMatrix.jsx';
---

<Layout>
    {/* Componentes hidratados en el cliente */}
    <HeroDual client:load lang={lang} />
    <TechMatrix client:load lang={lang} />
</Layout>