HTMX vs SPA - Cuando usar cada uno

SPA Tipico:
├── Frontend (React/Vue)
│   ├── State management (Redux/Vuex)
│   ├── Routing (React Router)
│   ├── API client (Axios/fetch)
│   ├── Build system (Webpack/Vite)
│   └── Testing (Jest/Cypress)
├── Backend (API)
│   ├── Serializers
│   ├── CORS config
│   └── Auth tokens
└── DevOps
    ├── 2 deployments
    └── 2 pipelines CI/CD

<!-- Un boton que actualiza solo una parte de la pagina -->
<button
    hx-post="/agregar-producto"
    hx-target="#carrito"
    hx-swap="innerHTML">
    Agregar al carrito
</button>

<div id="carrito">
    <!-- El servidor envia HTML aqui -->
</div>

@rt('/agregar-producto')
def post(producto_id: int):
    carrito = agregar_al_carrito(producto_id)
    # Retorna HTML, no JSON
    return Div(
        *[ItemCarrito(item) for item in carrito.items],
        P(f'Total: ${carrito.total}')
    )

<!-- HTMX para la estructura -->
<div hx-get="/dashboard" hx-trigger="load">
    Loading...
</div>

<!-- Alpine.js para interactividad local -->
<div x-data="{ open: false }">
    <button @click="open = !open">Menu</button>
    <nav x-show="open">...</nav>
</div>

<!-- Chart.js solo donde se necesita -->
<canvas id="grafico"
    x-data
    x-init="renderChart($el, await fetch('/api/datos').then(r => r.json()))">
</canvas>

FastHTML + HTMX + Alpine.js
├── Server-side rendering (SEO, performance)
├── Partial updates (UX fluida)
├── Minimal JS (solo donde agrega valor)
└── Un solo deployment (simplicidad)