Arquitectura de Componentes de Servidor e Islas

La arquitectura de islas es un enfoque moderno para construir aplicaciones web performantes minimizando el JavaScript del lado del cliente.

¿Qué es la Arquitectura de Islas?

La arquitectura de islas implica:

• HTML renderizado en el servidor para contenido estático
• "Islas" interactivas aisladas para componentes dinámicos
• Un mínimo de JavaScript enviado al cliente

Beneficios

1. Mejor Rendimiento: Menos JavaScript para descargar y analizar
2. Carga Inicial Más Rápida: El HTML es renderizable de inmediato
3. Amigable con el SEO: Renderizado completo del lado del servidor
4. Mejora Progresiva: Funciona sin JavaScript

Implementación en HonoX

Crea un componente isla en app/islands/Counter.tsx:

import { createIsland } from "honox/island";

export default createIsland({
  Component: function Counter() {
    const [count, setCount] = createSignal(0);
    
    return (
      <div>
        <p>Count: {count()}</p>
        <button onClick={() => setCount(count() + 1)}>
          Increment
        </button>
      </div>
    );
  },
});

Úsalo en tu ruta:

import Counter from "../islands/Counter";

export default createRoute((c) => {
  return c.render(
    <div>
      <h1>My Page</h1>
      <p>This is static content.</p>
      <Counter client:load />
    </div>
  );
});

Buenas Prácticas

• Mantén las islas pequeñas y enfocadas
• Usa client:load solo cuando sea necesario
• Prefiere el renderizado en servidor para contenido estático
• Usa client:idle para interactividad no crítica

Conclusión

La arquitectura de islas ofrece un excelente equilibrio entre interactividad y rendimiento.